Tugas 6
Codeigniter - Portfolio Website
CodeIgniter merupakan aplikasi sumber terbuka yang berupa kerangka kerja PHP dengan model MVC (Model, View, Controller) untuk membangun situs web dinamis dengan menggunakan PHP. CodeIgniter memudahkan pengembang web untuk membuat aplikasi web dengan cepat dan mudah dibandingkan dengan membuatnya dari awal. CodeIgniter dirilis pertama kali pada 28 Februari 2006. Model View Controller merupakan suatu konsep yang cukup populer dalam pembangunan aplikasi web, berawal pada bahasa pemrograman Small Talk, MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang membangun sebuah aplikasi seperti manipulasi data, antarmuka pengguna, dan bagian yang menjadi kontrol aplikasi. Terdapat 3 jenis komponen yang membangun suatu pola MVC dalam suatu aplikasi yaitu:
- View, merupakan bagian yang menangani logika presentasi. Pada suatu aplikasi web bagian ini biasanya berupa berkas templat HTML, yang diatur oleh controller. View berfungsi untuk menerima dan merepresentasikan data kepada pengguna. Bagian ini tidak memiliki akses langsung terhadap bagian model.
- Model, biasanya berhubungan langsung dengan pangkalan data untuk memanipulasi data (insert, update, delete, search), menangani validasi dari bagian controller, tetapi tidak dapat berhubungan langsung dengan bagian view.
- Controller, merupakan bagian yang mengatur hubungan antara bagian model dan bagian view, controller berfungsi untuk menerima permintaan dan data dari pengguna kemudian menentukan apa yang akan diproses oleh aplikasi.
Membuat Project Melalui Composer
Jika belum melakukan instalasi Composer, bisa mengikuti langkah-langkah instalasi Composer disini. Setelah Composer diinstall, selanjutnya melakukan inisialisasi project dengan command:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| composer create-project codeigniter4/appstarter projectName |
Dari command tersebut akan dibuatkan direktori dengan nama sesuai dengan projectName yang kita buat.
Membuat Tampilan Web dan Menambahkan File CSS & JavaScript
Berikut merupakan beberapa code untuk tampilan web:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="<?= base_url('assets/styles.css') ?>"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" defer></script> | |
| <script src="http://code.jquery.com/jquery-3.5.1.js"></script> | |
| <script src="<?= base_url('assets/main.js') ?>" defer></script> | |
| <title>PortfolioCI - PBKK_B</title> | |
| </head> | |
| <body> | |
| <?= $this->renderSection('content') ?> | |
| <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?= $this->extend('layouts/template.php') ?> | |
| <?= $this->section('content') ?> | |
| <div class="overlay first"></div> | |
| <div class="overlay second"></div> | |
| <div class="overlay third"></div> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="home"> | |
| <div class="information"> | |
| <p class="sec1 animated">Hello, i'm</p> | |
| <h1 class="sec2 animated">Clever Dicki Marpaung</h1> | |
| <p class="sec3 animated">ITS Student | Web Developer</p> | |
| <div class="reach"> | |
| <a href="https://github.com/cleverdicki"><i class="fab fa-github fa-2x"></i></a> | |
| <a href="https://www.instagram.com/cleverdicky/"><i class="fab fa-instagram fa-2x"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="home__img"> | |
| <img class="image_self" src="<?= base_url('images/dicki.jpg') ?>" alt="Clever Dicki Marpaung"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <?= $this->endSection() ?> |
Berikut merupakan file CSS dan JavaScript yang digunakan:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| text-decoration: none; | |
| overflow: hidden; | |
| } | |
| body { | |
| background-color: black !important; | |
| } | |
| .information { | |
| margin-top: 200px; | |
| } | |
| img { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| p { | |
| font-size: 15px; | |
| margin-bottom: 0 !important; | |
| } | |
| .reach { | |
| padding-top: 20px; | |
| } | |
| a { | |
| margin-right: 10px; | |
| } | |
| .overlay { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1000; | |
| } | |
| .first { | |
| background-color: #4e1116; | |
| } | |
| .second { | |
| background-color: #4e1116; | |
| left: 33.3%; | |
| } | |
| .third { | |
| background-color: #4e1116; | |
| left: 66.6%; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| gsap.to(".first", 1.5, { delay: 0.5, top: "-100%", ease: Expo.easeInOut }); | |
| gsap.to(".second", 1.5, { delay: 0.7, top: "-100%", ease: Expo.easeInOut }); | |
| gsap.to(".third", 1.5, { delay: 0.9, top: "-100%", ease: Expo.easeInOut }); | |
| gsap.from(".information", { | |
| opacity: 0, | |
| duration: 3, | |
| delay: 2.5, | |
| y: 25, | |
| }); | |
| gsap.from(".animated", { | |
| opacity: 0, | |
| duration: 3, | |
| delay: 2.3, | |
| y: 25, | |
| ease: "expo.out", | |
| stagger: 0.3, | |
| }); | |
| gsap.from(".home__img", { opacity: 0, duration: 2, delay: 2.3, x: 30 }); |
Berikut tampilan Portfolio Web yang dibuat:
Comments
Post a Comment