Home PWEB-B ETS PWEB 2021

ETS PWEB 2021

By
November 16, 2021
Less than a minuteRead
Add Comment

 ETS PWEB 2021

Nama: Dyandra Paramitha Widyadhana
NRP: 05111940000119
Kelas: PWEB-B





No. 4 

Untuk no. 4 kami diminta untuk membuat sebuah website berdasarkan kriteria yang telah diberikan. Untuk membuat website, saya menggunakan tools: 
  1. HTML untuk struktur web
  2. CSS (external dan internal) untuk desain dan style web
  3. Framework bootstrap sebagai tambahan dari CSS. Hal ini untuk membuat pembuat web front menjadi lebih efektif dan efisien. Adapun dengan bootstrap, antarmuka website menjadi responsif. 
  4. Javascript untuk validasi form (menggunakan SweetAlert)
  5. Ajax 


Link Website : Link Website










Source Code

Link Github: Github
Link Website Link Website





Halaman Utama
Copy
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
 <link rel="stylesheet" href="stylesheet.css">
 <title>Dyandra Paramitha Widyadhana</title>
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-light bg-light">
 <div class="container-fluid">
 <a class="navbar-brand" href="index.html">Dyandra Paramitha</a>
 <button class="navbar-toggler" type="button">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
 <div class="navbar-nav">
 <a class="nav-link active" aria-current="page" href="index.html">Home</a>
 <a class="nav-link"
 href="portofolio.html">Download
 CV</a>
 <a class="nav-link" href="contact.html">Contact</a>
 <a class="nav-link" href="about.html">About me</a>
 </div>
 </div>
 </div>
 </nav>
<header>
 <div class="cover">
 <div class="container px-3">
 <div class="row mx-5">
 <div class="col-lg-6 p-3"><img style="border-radius: 50%;" src="image/foto.jpg" width="300px"
 alt="hello" /></div>
 <div class="col-lg-6">
 <div class="mt-5">
 <p class="lead text-uppercase mb-1"><strong>Hello!</strong> I am</p>
 <h1 class="intro-title marker">Dyandra Paramitha Widyadhana</h1>
 <p class="lead fw-normal mt-3">05111940000119</p>
 <button type="button" class="btn btn-dark" onclick="loadDoc()">Halo!</button>
 <div class="my-3" id='targetData'></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="wave-bg"></div>
 </header>
<article style="text-align: center;" class="mx-4">
 <h2>Hey, everyone!</h2>
 <p>
 I'm Dyandra Paramitha, and usually goes by Dyandra. <br>Born in Surabaya, I'm currently
 in my third year of study at Institut Teknologi Sepuluh Nopember, specifically studying Informatics
 Engineering.
 </p>
 <p>
 As a third year student, I'm now in the process of finding out what field I want to
 work or study in, but I'm currently interested in developing myself better in Data and Software
 Development. I'm also active in
 some university organizations. In my spare time, I like to read and review books.
 </p>
 </article>
<div style="max-width: 900px;" class="mx-auto">
 <table class="table">
 <thead>
 <tr>
 <th scope="col">Skills/Interest</th>
 <th scope="col">Pengalaman</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Web Development</td>
 <td>Basic Programming Teaching Assistant</td>
 </tr>
 <tr>
 <td>Data Science</td>
 <td>Data Structure Teaching Assistant</td>
 </tr>
 <tr>
 <td>Literature</td>
 <td>Data Intern at Blibli.com</td>
 </tr>
 <tr>
 <td></td>
 <td>Admin at Lab Alpro</td>
 </tr>
 </tbody>
 <caption>For more information, click <a href="about.html">Here</a></caption>
 </table>
 <!-- <table border="2" width="100%">
<thead style="text-align: center;">
 <th>Skill/Interest</th>
 <th>Pengalaman</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>
 <ul style="list-style-type:none; text-align: center;">
 <li>Web Development</li>
 <li>Data Science</li>
 <li><a href="about.html">More</a></li>
 </ul>
 </td>
 <td>
 <ul style="list-style-type:none; text-align: center;">
 <li>Admin Lab Alpro</li>
 <li>Teaching Assistant Basic Programming</li>
 <li>Teaching Assistant Data Structure</li>
 <li><a href="about.html">More</a></li>
 </ul>
 </td>
 </tr>
 </tbody>
 </table> -->
</div>
<hr>
 <footer style="text-align: center;">
 <p>Copyright &copy; 2021 Dyandra Paramitha.</p>
 </footer>
 <script>
 function loadDoc() {
 const xhttp = new XMLHttpRequest();
 xhttp.onload = function () {
 const myObj = JSON.parse(this.responseText);
 document.getElementById("targetData").innerHTML = myObj.teks;
 }
 xhttp.open("GET", "https://mocki.io/v1/0155b423-45f4-4716-bbb7-61532ae04ec0", true);
xhttp.send();
 }
 </script>
</body>
</html>
Halaman Portofolio
Copy
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
 <link rel="stylesheet" href="stylesheet.css">
 <title>Dyandra Paramitha Widyadhana</title>
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-light cover">
 <div class="container-fluid">
 <a class="navbar-brand" href="index.html">Dyandra Paramitha</a>
 <button class="navbar-toggler" type="button">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
 <div class="navbar-nav">
 <a class="nav-link" aria-current="page" href="index.html">Home</a>
 <a class="nav-link"
 href="portofolio.html">Download
 CV</a>
 <a class="nav-link active" href="contact.html">Contact</a>
 <a class="nav-link" href="about.html">About me</a>
 </div>
 </div>
 </div>
 </nav>
 <div class="wave-bg"></div>
 <div class="section px-2 px-lg-4 pt-5" id="CV">
 <div class="container">
 <div class="text-center mb-5">
 <h2 class="marker marker-center">Curriculum Vitae</h2>
 <h4> <a class="nav-link"
 href="https://drive.google.com/uc?export=download&id=1c9dssNIVBWG8ka10HlP_gkLCn4Kgh67F">Download
 CV</a></h4>
 </div>
 </div>
 </div>
 </div>
<div class="section px-2 px-lg-4 pt-5" id="portfolio">
 <div class="container text-center">
 <div class="text-center mb-5">
 <h2 class="marker marker-center">Portfolio </h2>
 </div>
 <div class="row">
 <div class="col md-6">
 <div>
 <h4>The Reading Den</h4>
 <img src="/image/thereadingme.png" width="90%"alt="" style="text-align: center;"><br>
 <caption>The Reading Den <br><a href="http://thereadingden.me/">Click Here to View</a></caption>
 </div>
</div>
 <div class="col md-6">
 <div>
 <h4>Website CV</h4>
 <img src="/image/cv.png" width="90% "alt="" style="text-align: center;"><br>
 <caption>Website CV <br><a href="https://dydyandra.github.io/cv-dyandra/">Click Here to View</a></caption>
 </div>
</div>
</div>
<div class="row mt-5 mb-3">
 <div class="col md-6">
 <div>
 <h4>TBMO</h4>
 <img src="/image/tbmo.png" width="90%"alt="" style="text-align: center;"><br>
 <caption>TBMO</caption>
 </div>
</div>
 <div class="col md-6">
 <div>
 <h4>Warung Tegal</h4>
 <img src="/image/warungtegal.png" width="90% "alt="" style="text-align: center;"><br>
 <caption>Warung Tegal <br><a href="https://dydyandra.github.io/warung-tegal/">Click Here to View</a></caption>
 </div>
</div>
</div>
 </div>
 <footer style="text-align: center;">
 <p>Copyright &copy; 2021 Dyandra Paramitha.</p>
 </footer>
</body>
</html>
Halaman Kontak
Copy
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
 <link rel="stylesheet" href="stylesheet.css">
 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
 <title>Dyandra Paramitha Widyadhana</title>
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-light cover">
 <div class="container-fluid">
 <a class="navbar-brand" href="index.html">Dyandra Paramitha</a>
 <button class="navbar-toggler" type="button">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
 <div class="navbar-nav">
 <a class="nav-link" aria-current="page" href="index.html">Home</a>
 <a class="nav-link"
 href="portofolio.html">Download
 CV</a>
 <a class="nav-link" href="contact.html">Contact</a>
 <a class="nav-link active" href="about.html">About me</a>
 </div>
 </div>
 </div>
 </nav>
 <div class="wave-bg"></div>
 <div class="section px-2 px-lg-4 pb-4 pt-5 mb-5" id="contact">
 <div class="container-narrow">
 <div class="text-center mb-5">
 <h2 class="marker marker-center">Contact Me!</h2>
 </div>
 <div class="row">
 <div class="col-md-6">
 <div class="bg-light my-2 p-3 pt-2">
 <form onsubmit="return validateForm()">
 <div class="form-group my-2">
 <label for="name" class="form-label fw-bolder">What's your name?'</label>
 <input class="form-control" type="text" id="name" required>
 </div>
 <div class="form-group my-2">
 <label for="email" class="form-label fw-bolder">What's your email?'</label>
 <input class="form-control" type="email" id="email" required>
 </div>
 <div class="form-group my-2">
 <label for="message" class="form-label fw-bolder">What do you want to say?</label>
 <textarea class="form-control" style="resize: none;" id="message"
rows="4" required></textarea>
 </div>
 <button class="btn btn-dark mt-2" type="submit">Send</button>
 </form>
 </div>
 </div>
 <div class="col-md-6">
 <div class="mt-3 px-1">
 <div class="h5">Let's stay connected!</div>
 <p>If you want to stay connected then drop me a message using the contact
 form. </p>
 <p>Or you can also get in touch using my email or my linkedin.</p>
 <p>See you!</p>
 </div>
 <div class="mt-53 px-1">
 <div class="row">
 <div class="col-sm-2">
 <div class="pb-1">Email:</div>
 </div>
 <div class="col-sm-10">
 <div class="pb-1 fw-bolder">dy.dyandraparamitha@gmail.com</div>
 </div>
 <div class="col-sm-2">
 <div class="pb-1">Linkedin</div>
 </div>
 <div class="col-sm-10">
 <div class="pb-1 fw-bolder"><a
 href="https://www.linkedin.com/in/dyandra-paramitha-2bb0271bb/">Click Here</a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <footer style="text-align: center;">
 <p>Copyright &copy; 2021 Dyandra Paramitha.</p>
 </footer>
<script>
 function validateForm() {
 swal({
 title: "Data Berhasil Tersimpan",
 text: "Terima kasih telah mengisi form!",
 icon: 'success',
 }).then(okay => {
 if (okay) {
 window.location.href = "index.html";
 }
 });
return false;
 }
 </script>
</body>
</html>
Halaman About Me
Copy
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
 <link rel="stylesheet" href="stylesheet.css">
 <title>Dyandra Paramitha Widyadhana</title>
</head>
<body>
 <nav class="navbar navbar-expand-lg navbar-light cover">
 <div class="container-fluid">
 <a class="navbar-brand" href="index.html">Dyandra Paramitha</a>
 <button class="navbar-toggler" type="button">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
 <div class="navbar-nav">
 <a class="nav-link" aria-current="page" href="index.html">Home</a>
 <a class="nav-link"
 href="portofolio.html">Download
 CV</a>
 <a class="nav-link active" href="contact.html">Contact</a>
 <a class="nav-link" href="about.html">About me</a>
 </div>
 </div>
 </div>
 </nav>
 <div class="wave-bg"></div>
 <div class="section mx-5 pt-5 px-5 px-lg-5" id="about">
 <div class="container-narrow">
 <div class="row">
 <div class="col-md-6">
 <h1>About Me</h1>
 <h2 class="h4 my-2">Hello! I'm Dyandra Paramitha.</h2>
 <p>Born in Surabaya, I'm currently
 in my third year of study at Institut Teknologi Sepuluh Nopember, specifically studying Informatics
 Engineering.<br>As a third year student, I'm now in the process of finding out what field I want to
 work or study in, but I'm currently interested in developing myself better in Data and Software
 Development. I'm also active in
 some university organizations. In my spare time, I like to read and review books.</p>
 <div class="row mt-3">
 <div class="col-sm-2">
 <div class="pb-1">Age:</div>
 </div>
 <div class="col-sm-10">
 <div class="pb-1 fw-bolder">20</div>
 </div>
 <div class="col-sm-2">
 <div class="pb-1">Email:</div>
 </div>
 <div class="col-sm-10">
 <div class="pb-1 fw-bolder">dy.dyandraparamitha@gmail.com</div>
 </div>
 <div class="col-sm-2">
 <div class="pb-1">Address:</div>
 </div>
 <div class="col-sm-10">
 <div class="pb-1 fw-bolder">Surabaya, Indonesia</div>
 </div>
 </div>
 </div>
 <div class="col-md-5 offset-md-1" data-aos="fade-left" data-aos-delay="100"><img
 class="avatar img-fluid mt-2" src="image/foto.jpg" width="400" height="400"
 alt="Walter Patterson" /></div>
 </div>
 </div>
 </div>
 <div class="section mx-5 px-5 px-lg-4 pt-5" id="skills">
 <div class="container-narrow">
 <div class="text-center mb-5">
 <h2 class="marker marker-center">Skills</h2>
 </div>
 <div class="text-center">
 </div>
 <div class="bg-light p-3">
 <div class="row">
 <div class="col-md-5">
 <div class="py-1">
 <div class="d-flex text-small fw-bolder"><span class="me-auto">HTML5</span><span>90%</span>
 </div>
 <div class="progress my-1">
 <div class="progress-bar bg-dark" role="progressbar" style="width: 90%"
 aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 </div>
 <div class="py-1">
 <div class="d-flex text-small fw-bolder"><span class="me-auto">CSS3</span><span>70%</span>
 </div>
 <div class="progress my-1">
 <div class="progress-bar bg-dark" role="progressbar" style="width: 90%"
 aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 </div>
 <div class="py-1">
 <div class="d-flex text-small fw-bolder"><span
 class="me-auto">JavaScript</span><span>60%</span></div>
 <div class="progress my-1">
 <div class="progress-bar bg-dark" role="progressbar" style="width: 80%"
 aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 </div>
 <div class="py-1">
 <div class="d-flex text-small fw-bolder"><span class="me-auto">SQL</span><span>85%</span>
 </div>
 <div class="progress my-1">
 <div class="progress-bar bg-dark" role="progressbar" style="width: 75%"
 aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 </div>
 </div>
 <div class="col-md-5 offset-md-2">
 <div class="py-1">
 <div class="d-flex text-small fw-bolder"><span class="me-auto">English</span><span>90%</span>
 </div>
 <div class="progress my-1">
 <div class="progress-bar bg-dark" role="progressbar" style="width: 70%"
 aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 </div>
 <div class="py-1">
 <div class="d-flex text-small fw-bolder"><span
 class="me-auto">Secretarial</span><span>80%</span></div>
 <div class="progress my-1">
 <div class="progress-bar bg-dark" role="progressbar" style="width: 60%"
 aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 </div>
 <div class="py-1">
 <div class="d-flex text-small fw-bolder"><span
 class="me-auto">Microsoft Office</span><span>90%</span></div>
 <div class="progress my-1">
 <div class="progress-bar bg-dark" role="progressbar" style="width: 60%"
 aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<div class="section px-5 mx-4 px-lg-4 pt-5" id="experience">
 <div class="container-narrow">
 <div class="text-center mb-5">
 <h2 class="marker marker-center">Experience</h2>
 </div>
 <div class="row">
 <div class="col-md-6">
 <div class="card mb-3">
 <div class="card-header px-3 py-2">
 <div class="d-flex justify-content-between">
 <div>
 <h3 class="h5 mb-1">Administrator</h3>
 <div class="text-muted text-small">Algorithms and Programming Laboratory <small>(MAY 2021 - PRESENT)</small></div>
 </div>
 </div>
 </div>
 <div class="card-body px-3 py-2">
 <p>Helps in coordinating materials for events such as LBE and coordinating teaching assistants for Basic Programming course, one of the classes of the laboratory's field.</p>
 </div>
 </div>
 </div>
 <div class="col-md-6">
 <div class="card mb-3">
 <div class="card-header px-3 py-2">
 <div class="d-flex justify-content-between">
 <div>
 <h3 class="h5 mb-1">Data Analytics Intern</h3>
 <div class="text-muted text-small">Blibli.com <small>(AUG 2021 - PRESENT)</small></div>
 </div>
 </div>
 </div>
 <div class="card-body px-3 py-2">
 <p>A participant of the FUTURE program run by Blibli to upskill potentials of university students to gain experience in the real industry..</p>
 </div>
 </div>
 </div>
 <div class="col-md-6">
 <div class="card mb-3">
 <div class="card-header px-3 py-2">
 <div class="d-flex justify-content-between">
 <div>
 <h3 class="h5 mb-1">Teaching Assistant</h3>
 <div class="text-muted text-small">Basic Programming<small>(AUG 2021 - PRESENT)</small></div>
 </div>
 </div>
 </div>
 <div class="card-body px-3 py-2">
 <p>Coordinator of the Basic Programming teaching assistants, with the task of organizing lab sessions and lab evaluations for all the Basic Programming participants, assists the lecturer during class , assists the class during lab sessions with other assistants inside the class , helps in compiling and preparing materials for lab evaluations</p>
 </div>
 </div>
 </div>
 <div class="col-md-6">
 <div class="card mb-3">
 <div class="card-header px-3 py-2">
 <div class="d-flex justify-content-between">
 <div>
 <h3 class="h5 mb-1">Teaching Assistant</h3>
 <div class="text-muted text-small">Data Structure <small>(MAR 2021 - JULY 2021)</small></div>
 </div>
 </div>
 </div>
 <div class="card-body px-3 py-2">
 <p>Provided tutoring sessions every week for a group of students in the class for further assistance and evaluation , helped in assisting the class during lecture session and lab session and in compiling and preparing modules for lab sessions and lab evaluations</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <footer style="text-align: center;">
 <p>Copyright &copy; 2021 Dyandra Paramitha.</p>
 </footer>
</body>
</html>
Stylesheet
Copy
.wave-bg {
 display: block;
 height: 200px;
 width: 100%;
 min-width: 600px;
 transform-origin: top;
 background-image: url("../image/wave-bg.svg");
 background-position: center;
 background-repeat: no-repeat;
 }
.cover{
 background-color: rgb(244, 246, 248);
 opacity: 10;
 }
.marker {
 position: relative;
 display: inline;
 width: auto;
 }
.marker-center {
 padding-right: 0;
 }
.marker:after {
 content: "";
 width: 125px;
 height: 30px;
 position: absolute;
 bottom: -25px;
 right: -30px;
 background-image: url("image/marker.svg");
 background-repeat: no-repeat;
 }
p{
 font-size: large;
 }
a{
 color: #000000;
 text-decoration: none;
 }

Demo ETS

Tags :
Subscribe to: Post Comments ( Atom )

Leave a Comment

No comments:

Powered by Blogger.

Created By ThemeXpose · Powered by Blogger
All rights reserved