Pemrograman Web C | ETS

ETS

Kelompok:

5025201032 - Hafiz Kurniawan

5025201165 - Gabriel Solomon Sitanggang

5025201167 - William Zefanya Maranatha

Pada pertemuan ini, diberikan soal ETS yang berguna menguji kompetensi/ kemampuan untuk menjadi Front Developer. Tools yang dipakai bisa menggunakan Html, CSS, JavaScrip, JQuery ataupun Content Management System. Pada ETS ini, diminta untuk mengerjakan soal sebagai berikut :

1. Buatlah konsep dan desain konten untuk aplikasi Startup. Konsep dan desain antara 1 kelompok dengan yang lain tidak boleh sama (Setelah selesai membaca soal dan referensi segera posting ide di koment, guna menghindari kesamaan ide).  Konsep memuat deskripsi problem yang dihadapi, dan solusi yang diusulkan dalam bentuk aplikasi.
2. Implementasikan konsep yang telah dibuat ke dalam sebuah aplikasi web.
3. Hostingkan aplikasi web yang dibangun dan daftarkan nama domainnya.
4. Buatlah Video Pitching, yaitu video presentasi yang menjelaskan deskripsi ide bisnismu kepada calon investor dan juga kepada calon pengguna. Upload video Pitching ke Youtube.
5. Buat Dokumentasi pengerjaan di blog, yang memuat konsep desain, link domain aplikasi, dan Embedded  video Youtube. Link dokumentasi tuliskan sebagai komentar di posting ETS Pemrograman Web 2022.

Problem Statement:

Seperti yang telah diketahui bahwa Kesehatan merupakan hal yang sangat vital dalam kehidupan. Namun dengan begitu pentingnya Kesehatan belum sebanding dengan usaha untuk mendapatkan kemudahan akses layanan Kesehatan. Mulai dari proses pendaftaran, melakukan catatan medis, cek lab, treatment Kesehatan dan lainnya, masih sangat diperlukan pengembangan sehingga layanan Kesehatan dapat diakses secara praktis, cepat dan akurat. Dengan adanya akses layanan yang praktis, cepat dan akurat mungkin bisa dibayangkan seberapa banyak membantu orang yang membutuhkan layanan Kesehatan pada waktu yang tepat.

Solusi:

Perlu adanya pengembangan website layanan Kesehatan rumah sakit yang dapat memberikan pelayanan Kesehatan secara praktis, cepat dan akurat.

Repository dapat dilihat di link berikut : Repository

Website dapat dilihat di link berikut ini : Hospital.in

Video pitching terdapat di link berikut  : Youtube

Dokumentasi (dalam bentuk gambar) 

• Home

    Pada halaman ini berisi tulisan selamat datang di web hospital.in, kemudian ada pilihan Find Doctor dan Appointment. Kemudian ada bagian About Us, dan di bawahnya ada services yang disediakan oleh hospitalin. Kemudian dibawahnya ada bagian Book An Appointment dengan Appointment history dari pengguna yang bisa ditambah maupun dikurangi. Kemudian ada Medical Packages yang berisi harga dari setiap service yang diberikan. Kemudian dibawahnya ada dokter yang akan melayani pasien di hospital.in ini. Kemudian ada fitur mencari dokter. Dan dibawahnya lagi terdapat bagian Testimonial dari pengguna sebelumnya. Di bawahnya lagi ada blog post kesehatan yang bisa diakses pengguna. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.

• About

    Pada halaman ini berisi bagian About Us, dan di bawahnya ada fitur Find a Doctor dan kemudian ada bagian yang menampilkan dokter yang melayani di Hospital.in ini. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.

• Services

    Pada halaman ini menyediakan bagian services yang ditawarkan oleh Hospital.in. Kemudian pada halaman ini terdapat bagian Book An Appointment dengan Appointment history dari pengguna yang bisa ditambah maupun dikurangi. Kemudian di bawahnya ada testimonial dari pengguna yang pernah menggunakan website Hospital.in ini. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.

• Pricing

    Pada halaman ini terdapat bagian Medical Package yang berisi harga dari setiap service yang ada di Hospital.in. Kemudian di bawahnya ada Book An Appointment dengan Appointment history dari pengguna yang bisa ditambah maupun dikurangi. Kemudian ada bagian yang menampilkan dokter yang melayani di Hospital.in ini. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.

• Pages

1. Blog Grid

Pada halaman ini terdapat blog post yang baru saja diupload ke website Hospital.in. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in. 

      2. Blog Detail

Pada halaman ini terdapat blog yang lebih mendetail dan menampilkan kolom komentar dari blog yang dibuka. Kemudian ada Keyword untuk mencari blog yang diinginkan. Kemudian ada Recent Post blog post. Kemudian ada Tag Cloud yang berisikan tag yang berhubungan dengan blog post diatasnya. Kemudian ada bagian yang menampilkan dokter yang melayani di  Hospital.in ini. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.

      3. The Team

Pada halaman ini terdapat bagian yang menampilkan dokter yang melayani di Hospital.in ini. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in

      4. Testimonial

Pada halaman ini terdapat bagian Testimonial dari pengguna sebelumnya. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.

      5. Appointment

Pada halaman ini terdapat bagian Book An Appointment dengan Appointment history dari pengguna yang bisa ditambah maupun dikurangi. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.

      6. Search

Pada halaman ini terdapat bagian Find a Doctor dan kemudian ada bagian yang menampilkan dokter yang melayani di Hospital.in ini. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.

•  Contact

    Pada halaman ini terdapat bagian contact yang bisa dihubungi oleh pihak Hospital.in beserta dengan alamatnya. Kemudian ada google maps yang menuju ke kantor Hospital.in. Kemudian ada bagian untuk meninggalkan komen di bawahnya. Kemudian di bagian footer terdapat contact dan link untuk halaman yang lainnya serta newsletter yang menerima input berupa email address. Di bagian paling bawah ada copyright dari Hospital.in.

 

Pemrograman Web C | Tugas 6

Tugas Membuat Form Validation Menggunakan JQuery

Nama : Gabriel Solomon Sitanggang

NRP : 5025201165

Pada pertemuan ini, tugas yang diberikan yaitu membuat website menggunakan jQuery yang menampilkan form dengan validasi.

Link repository dapat diakses di link berikut.

Untuk dokumentasi websitenya bisa di akses di web berikut. 

Atau bisa dilihat langsung di gambar di bawah ini

 

Pemrograman Web C | Tugas 5

LATIHAN JQUERY

Nama : Gabriel Solomon Sitanggang

NRP : 5025201165

Pada pertemuan ini, tugas yang diberikan yaitu membuat website yang menampilkan fungsi button sebagai click dan bisa menambah angkanya jika ditekan.

Link repository dapat diakses di link berikut. Atau bisa dilihat langsung dibawah ini

<!DOCTYPE html>  
<html>  
    <head>  
        <title>Latihan jQuery</title>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">  
    </head>  
    <body>  
        <div class="container">  
            <div class="row">  
                <div class="d-flex align-items-center justify-content-center mt-5">  
                <p id="number" class="h4 text-justify"> 0 </p>  
                </div>  
                <div class="d-flex align-items-center justify-content-center mt-1">  
                <button type="button" id="add" class="btn btn-dark">TEKAN!!!</button>  
                </div>  
            </div>  
        </div>  
        <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>  
        <script> 
            $(document).ready(function() {  
                let counter = 1;  
                $("#add").click(function() {  
                $("#number").html(counter++);  
                console.log("TES");  
                if (number & 1) {  
                    $("#add").addClass("btn-warning");  
                    $("#add").removeClass("btn-dark");  
                }  
                else {  
                    $("#add").addClass("btn-dark");  
                    $("#add").removeClass("btn-warning");  
                }  
                });  
            });  
        </script>  
    </body>  
</html>  

Untuk dokumentasi websitenya bisa di akses di web berikut. Atau bisa dilihat langsung di gambar di bawah ini

Pemrograman Web C | Tugas 4

LATIHAN BOOTSRAP 

Nama : Gabriel Solomon Sitanggang

NRP : 5025201165

Link repository dapat diakses di link berikut. Atau bisa dilihat langsung dibawah ini

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tugas 5</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        <a class="navbar-brand" href="index.html">
            <img src="gambar/logo.png" alt="logo" style="width:50px;">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Pemrograman</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Database</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Framework</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Lainnya</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="jumbotron text-center">
        <h1>Belajar Programming Itu Mudah</h1>
        <p>Tingkatkan skill programming kamu belajar tutorial pemrograman gratis!</p>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-3">
                <div class="thumbnail">
                    <a href="#"><img src="gambar/HTML_&_CSS.png" width="100%" alt="Cinque Terre"></a>
                    <div class="caption">
                        <h3>Belajar HTML & CSS</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris</p>
                        <p><a href="#" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <a href="#"><img src="gambar/Programming.png" width="100%" alt="Cinque Terre"></a>
                    <div class="caption">
                        <h3><a href="#" style="text-decoration:none;color: black;">Web Programming</a> </h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris</p>
                        <p><a href="#" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                    </div>
                </div>

            </div>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <a href="#"><img src="gambar/Python.png" width="100%" alt="Cinque Terre"></a>
                    <div class="caption">
                        <h3>Belajar Python</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris</p>
                        <p><a href="#" class="btn btn-light btn-block" role="button">Selengkapnya</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="thumbnail">
                    <a href="#"><img src="gambar/Desain_UI_&_UX.png"  width="100%" alt="Cinque Terre"></a>
                    <div class="caption">
                        <h3>Desain UI & UX</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris</p>
                        <p><a href="#" class="btn btn-light btn-block " role="button">Selengkapnya</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

Untuk dokumentasi dapat dilihat di bawah ini.

Pemrograman Web C | Quiz 1

Nama : Gabriel Solomon Sitanggang

NRP : 5025201165

Kelas : PWEB C

Link repository berikut.

Tampilan dari web dapat dilihat sebagai berikut

1. Tampilan awal

2. Tampilan ketika data telah disubmit.

3.Tampilan data yang telah diinput ke dalam local storage

Pemrograman Web C | Tugas 4

 

Membuat Website Pencarian Kode Pos dengan Javascript

Nama : Gabriel Solomon Sitanggang

NRP : 5025201165

Link repository dapat diakses di link berikut. Atau bisa dilihat langsung dibawah ini

1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Postal Code</title>
</head>
<body>
    <div class="box">
        <div class="judul" id="judul">
            <h1>🗺️ INDONESIAN POSTAL CODE 🗺️</h1>
        </div>
        <div class="flex">
            <form id="form">
                <div class="divInput">
                    <label class="judul">Select Province:</label>
                    <select class="btn" id="prov" name="provinsi" required>
                        <option value="" disabled selected>Select Province</option>
                    </select>
                    <label class="judul">Select District:</label>
                    <select class="btn" id="kab" name="kabupaten" required>
                        <option value="" disabled selected>Select District</option>
                    </select>
                    <label class="judul">Postal Code:</label>
                    <input class="btn" id="cari" type="number" placeholder="Masukan kode pos">
                </div>
            </form>
        </div>
        <div class="result">
        </div>
    </div>
    
    <script type="module" src="main.js"></script>
</body>
</html>

2. style.css

body {
    margin: 0px;
    background-color: #3B9AE1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
}

.box {
    background-color: #21E1E1;
    flex-direction: column;
    border: 2px solid black;
    width: 50em;
    height: 30em;
    box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.75);
}

.judul {
    width: 100%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3120E0;
    font-family: monospace;
    font-size: larger;
    animation: show 2.5s;
    opacity: 1;
    visibility: visible;
    font-weight: bold;
}

.flex {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

form {
    padding: 20px;
    width: 40%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: show 2.5s;
    opacity: 1;
    visibility: visible;
}

.divInput {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: 8px;
}

.btn {
    cursor: pointer;
    padding: 5px;
    border: 2px solid black;
    background-color: #F0EABE;
    color: black;
    font-weight: bold;
    width: 100%;
}

.btn:hover {
    background-color: #3B9AE1;
    color: #000000;
    transition: 0.18s ease-in-out;
    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.75);
    -webkit-transition: 0.18s ease-in-out;
    -moz-transition: 0.18s ease-in-out;
    -ms-transition: 0.18s ease-in-out;
    -o-transition: 0.18s ease-in-out;
}

form select,
input {
    margin-top: 20px;
    width: 90%;
    height: 30px;
    border-radius: 4px;
}

form label {
    margin-bottom: -10px;
    font-size: 20px;
}
form h1{
    display: block;
    margin: 0 auto;
    margin-top: -20px;
    margin-bottom: 40px;
}
h3{
    font-size: 14px;
    font-weight: normal;
}
p{
    font-size: 14px;
}

.result {
    margin-top: 200px;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    gap: 20px;
    width: 100%;
    justify-content: center;
}

.card {
    background-color: tomato;
    padding: 10px;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    width: 200px;
    height: 200px;
    border: solid black;
    border-radius: 8px;
    box-shadow: 11px 10px 20px -9px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 11px 10px 20px -9px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 11px 10px 20px -9px rgba(0, 0, 0, 0.7);
    animation: show 2.5s;
    opacity: 1;
    visibility: visible;
    font-family: monospace;
    font-size: larger;
}

.card:hover {
    background-color: #3be140;
    color: #000000;
    transition: 0.18s ease-in-out;
    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.75);
    -webkit-transition: 0.18s ease-in-out;
    -moz-transition: 0.18s ease-in-out;
    -ms-transition: 0.18s ease-in-out;
    -o-transition: 0.18s ease-in-out;
}

@keyframes show {
    0%{
        opacity: 0;
        visibility: hidden;
    }
    100%{
        opacity: 1;
        visibility: visible;
    }
}

3. main.js

import data from "../data/data.json" assert {type: "json"}
let data_postal = []
const data_prov = []
const provinsi = document.querySelector("#prov")

const select = document.querySelector("#prov")
const select_kab = document.querySelector("#kab")
const kab = document.querySelector("#kab")

document.addEventListener('DOMContentLoaded', function () {
    addprov()
    setKab()
    result()
    form()
});

function setKab() {
    provinsi.addEventListener("change", function () {
        const id = provinsi.value
        const postal = data.postal[id]
        const option = document.createElement('option')
        option.innerText = "Pilih Kabupaten";
        option.setAttribute("selected",true)
        option.setAttribute("disabled",true)
        select_kab.innerText = ''
        select_kab.append(option)
        data_prov.push(postal)
        const city = [...new Set(postal.map((data) => {
            return data.city;
        }))]
        city.sort((a,b)=>{
            let fa = a.toLowerCase()
            let fb = b.toLowerCase()
    
            if (fa < fb) {
                return -1;
            }
            if (fa > fb) {
                return 1;
            }
            return 0;
        })
        city.map((data) => {
            makeOptionKab(data)
        })
    })
}

function addprov() {
    const prov = Object.entries(data.province)
     const data_baru = prov.map((data) => {
        return data[1]
    })
    data_baru.sort((a,b)=>{
        let fa = a.province_name.toLowerCase()
        let fb = b.province_name.toLowerCase()

        if (fa < fb) {
            return -1;
        }
        if (fa > fb) {
            return 1;
        }
        return 0;
    })
    data_baru.map((data)=>{
        makeOption(data)
    })
}

function makeOption(provinsi) {
    const option = document.createElement('option')
    option.innerText = provinsi.province_name;
    option.setAttribute('value', provinsi.province_code)
    select.append(option)
    return select
}

function makeOptionKab(kabupaten) {
    const option = document.createElement('option')
    option.innerText = kabupaten;
    option.setAttribute('value', kabupaten)
    select_kab.append(option)
    return select
}

function result() {
    kab.addEventListener("change", function () {
        const elemet = document.getElementsByClassName("card")
        if(elemet.length != 0){
            for(let i = 0,card ;card = elemet[i];i++)
            elemet[i].remove()
        }
        const value = kab.value;
        const result = data_prov[0].filter((data) => {
            if ( value  == data.city) return data
        })
        result.map((data) => {
            data_postal.push(data)
        })
        
        data_postal.map((data)=>{
            makeResult(data)
        })
        data_postal = []
    })


}

function makeResult(data) {
    const container = document.querySelector(".result");
    const div = document.createElement("div")
    const title = document.createElement("h3")
    const kecamanatan = document.createElement("h3")
    const p = document.createElement("p")
    title.innerText = `Desa : ${data.urban}`
    kecamanatan.innerText = `Kecamatan : ${data.sub_district}`
    p.innerText = `kode pos: ${data.postal_code}`
    div.classList.add("card")
    div.append(kecamanatan,title,p)
    container.append(div)
    return container
}

function form(){
    const cariForm = document.getElementById("form")
    cariForm.addEventListener("submit",function(e){
        e.preventDefault()
        const title = document.getElementsByTagName("p");
        const cari = document.querySelector("#cari")    
        const filter = document.getElementsByClassName("card");
        const value = cari.value;
        for (let i = 0, list; list = title[i]; i++) {
            let text = list.innerHTML;
            if (text.indexOf(value) > -1) {
                filter[i].style.display = "";
            } else if (value.length == 0) {
                console.log("hai");
            } else
                filter[i].style.display = "none";
        }

    })
    
}

Untuk tampilan dapat dilihat di bawah ini :

1. Tampilan Awal

2. Tampilan Memilih Provinsi yang Akan Dicari Kode Posnya

3. Tampilan Memilih Kabupaten yang Akan Dicari Kode Posnya

4. Hasil dari Pencarian Kode Pos Berdasarkan Provinsi dan Kabupaten yang Berisikan Informasi tentang Kecamatan, Desa, serta Kode Posnya

5. Dapat Juga Langsung Dicari Berdasarkan Kode Posnya yang Akan Menampilkan Informasi tentang Kecamatan, Desa, serta Kode Posnya

Pemrograman Web C | Tugas 3

  Halo teman-teman perkenalkan nama saya Gabriel Solomon Sitanggang dengan NRP 5025201165. Pada pertemuan ketiga, kami ditugaskan untuk membuat Form Login dan Sign Up. Untuk tampilannya seperti dibawah ini :

LOGIN

SIGN UP

Link repository dapat diakses di link berikut.

Pemrograman Web C | Tugas 2

 Halo teman-teman perkenalkan nama saya Gabriel Solomon Sitanggang dengan NRP 5025201165. Pada pertemuan kedua, kami ditugaskan untuk membuat Portal Berita. Untuk tampilannya seperti dibawah ini :

Link Reprository dapat diakses di link berikut.

Pemrograman Web C | Tugas 1

 Halo teman-teman perkenalkan nama saya Gabriel Solomon Sitanggang dengan NRP 5025201165. Pada pertemuan pertama, kami ditugaskan untuk membuat CV. Untuk tampilannya seperti dibawah ini :

Untuk link portofolio dapat diakses di link berikut.

Untuk link repository dapat diakses di link berikut

Pemrograman Berbasis Kerangka Kerja A | Tugas 10

MODELS ON CI

Pada artikel ini, saya Gabriel Solomon Sitanggang dengan NRP 5025201165 akan menggunakan MVC pada CI 3. Untuk referensi dapat dilihat di link ini.

Model View Controller (MVC) adalah sebuah pola arsitektur dalam membuat sebuah aplikasi dengan cara memisahkan kode menjadi 3 bagian berikut.

• Model

Model merupakan bagian yang bertugas dalam menyiapkan, mengatur, memanipulasi, dan mengorganisasikan data yang ada dalam database.

• View

View merupakan bagian yang bertugas untuk menampilkan informasi dalam bentuk Graphical User Interface (GUI)

• Controller

Controller merupakan bagian yang bertugas untuk menghubungkan serta mengatur model dan view agar dapat saling terhubung.

Alur dari MVC adalah sebagai berikut

• Pertama-tama, view akan meminta data untuk ditampilkan dalam bentuk grafis kepada pengguna
• Permintaan tadi akan diterima oleh controller dan diteruskan ke model untuk diproses
• Setelah itu, model akan mencari dan mengolah data yang diminta di dalam database
• Kemudian, model akan mengirim data tersebut kepada controller untuk ditampilkan di view
• Dan di akhir, controller akan mengambil data hasil pengolahan model dan mengaturnya di bagian view untuk ditampilkan kepada pengguna

 Manfaat MVC adalah sebagai berikut

• Mempermudah pemeliharaan
• Perbaikan bug atau error lebih cepat
• Dapat melakukan testing dengan lebih mudah
• Penulisan kode menjadi lebih rapi
• Proses pengembangan aplikasi menjadi lebih efisien

Penerapan CRUD pada CodeIgniter :

Untuk source code nya dapat di lihat di link berikut.