Tugas 8 PBKK - Code Igniter

Oleh:
Nama: Joseph Eric Amadeo S.
NRP: 05111840000077
Kelas: PBKK C


Tugas 8 - Membuat Website dengan Codeigniter


Pada tugas kali ini saya membuat website menggunakan codeigniter 4. Code Editor yang saya gunakan adalah Visual Studio Code, dan saya host web secara local menggunakan XAMPP.

Semua code dibawah dapar dilihat di github saya:Link Repository
Langkah pertama pembuatan website:

1. Download dan install XAMPP di komputer anda
2. Install codeigniter pada folder htdocs di folder xampp, untuk cara lengkapnya, dapat dilihat disini: Install Codeigniter 4
3. Pada folder project yang dibuat, buka file app/config/Routes.php. Tambahkan codes berikut: 
$routes->get('/about', 'Page::about');
$routes->get('/contact', 'Page::contact');

4. Tambahkan controller page, dengan cara buat file baru di dalam folder app/Controllers dengan nama Page.php. Berikut isi dari Page.php:
<?php namespace App\Controllers;

class Page extends BaseController
{
    public function about()
    {
        echo view("about");
    }
    
    public function contact()
    {
        echo view("contact");
    }
    
  
}

5. Saya menggunakan template css gratis dari startbootstrap. Letakkan template di folder public
 Kemudian ubah view home page dengan cara mengubah isi Views/welcome_message.php menjadi:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Joseph Eric</title>
        <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
        <!-- Font Awesome icons (free version)-->
        <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet" type="text/css" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="css/styles.css" rel="stylesheet" />
    </head>
    <body id="page-top">
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
            <a class="navbar-brand js-scroll-trigger" href="#page-top">
                <span class="d-block d-lg-none">Clarence Taylor</span>
                <span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/profile.jpg" alt="..." /></span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link js-scroll-trigger" href="">Home</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="about">About</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="contact">Contact</a></li>
        
                </ul>
            </div>
        </nav>
        <!-- Page Content-->
        <div class="container-fluid p-0">
            <!-- About-->
            <section class="resume-section" id="home">
                <div class="resume-section-content">
                    <h1 class="mb-0">
                        Joseph Eric Amadeo
                        <span class="text-primary">Seloatmodjo</span>
                    </h1>
                    <div class="subheading mb-5">
                    ·Informatics Student at Institut Teknologi Sepuluh Nopember·
                        
                    </div>
                    <p class="lead mb-5">Hi my name is Eric! I love to learn programming, welcome to my site!</p>
                    <div class="social-icons">
                        <a class="social-icon" href="#!"><i class="fab fa-linkedin-in"></i></a>
                        <a class="social-icon" href="www.github.com"><i class="fab fa-github"></i></a>
                        <a class="social-icon" href="#!"><i class="fab fa-twitter"></i></a>
                        <a class="social-icon" href="#!"><i class="fab fa-facebook-f"></i></a>
                    </div>
                </div>
            </section>
            <hr class="m-0" />
           
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="js/scripts.js"></script>
    </body>
</html>


Tampilan halaman home:



6. Tambahkan view about dengan cara membuat file baru Views/about.php. Berikut source codenya:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Resume - Start Bootstrap Theme</title>
        <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
        <!-- Font Awesome icons (free version)-->
        <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet" type="text/css" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="css/styles.css" rel="stylesheet" />
    </head>
    <body id="page-top">
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
            <a class="navbar-brand js-scroll-trigger" href="#page-top">
                <span class="d-block d-lg-none">Joseph Eric</span>
                <span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/profile.jpg" alt="..." /></span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="home">Home</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="about">About</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="contact">Contact</a></li>
                </ul>
            </div>
        </nav>
        <!-- Page Content-->
        <div class="container-fluid p-0">
            <!-- Skills-->
            <section class="resume-section" id="about">
                <div class="resume-section-content">
                    <h2 class="mb-5">About</h2>
                    <div class="subheading mb-3">I Love Programmming. Here's programming languages and tools that i'm familiar with:</div>
                    <ul class="list-inline dev-icons">
                        <li class="list-inline-item"><i class="fab fa-html5"></i></li>
                        <li class="list-inline-item"><i class="fab fa-css3-alt"></i></li>
                        <li class="list-inline-item"><i class="fab fa-js-square"></i></li>
                        <li class="list-inline-item"><i class="fab fa-angular"></i></li>
                        <li class="list-inline-item"><i class="fab fa-react"></i></li>
                        <li class="list-inline-item"><i class="fab fa-node-js"></i></li>
                        <li class="list-inline-item"><i class="fab fa-sass"></i></li>
                        <li class="list-inline-item"><i class="fab fa-less"></i></li>
                        <li class="list-inline-item"><i class="fab fa-wordpress"></i></li>
                        <li class="list-inline-item"><i class="fab fa-gulp"></i></li>
                        <li class="list-inline-item"><i class="fab fa-grunt"></i></li>
                        <li class="list-inline-item"><i class="fab fa-npm"></i></li>
                    </ul>
                    <div class="subheading mb-3">Other Passion:</div>
                    <ul class="fa-ul mb-0">
                        <li>
                            <span class="fa-li"><i class="fas fa-check"></i></span>
                            Data Science
                        </li>
                        <li>
                            <span class="fa-li"><i class="fas fa-check"></i></span>
                            Python
                        </li>
                        <li>
                            <span class="fa-li"><i class="fas fa-check"></i></span>
                            Travelling
                        </li>
                        <li>
                            <span class="fa-li"><i class="fas fa-check"></i></span>
                            Gaming
                        </li>
                    </ul>
                </div>
            </section>
            <hr class="m-0" />
       
        </div>
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="js/scripts.js"></script>
    </body>
</html>


Tampilan halaman about:



7. Terakhir, tambahkan view contact di Views/contact.php
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Resume - Start Bootstrap Theme</title>
        <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
        <!-- Font Awesome icons (free version)-->
        <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet" type="text/css" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="css/styles.css" rel="stylesheet" />
    </head>
    <body id="page-top">
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
            <a class="navbar-brand js-scroll-trigger" href="#page-top">
                <span class="d-block d-lg-none">Joseph Eric</span>
                <span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="assets/img/profile.jpg" alt="..." /></span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="home">Home</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="about">About</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="contact">Contact</a></li>
                </ul>
            </div>
        </nav>
        <!-- Page Content-->
        <div class="container-fluid p-0">
            <!-- Skills-->
            <section class="resume-section" id="contact">
                <div class="resume-section-content">
                    <h2 class="mb-5">Contact</h2>
                    <div class="subheading mb-3">If you have any questions, feel free to contact me: </div>
                    <div class="subheading mb-5">Mail: <a href="mailto:amadeo.eric@gmail.com">amadeo.eric@gmail.com</a></div>
                    <div class="subheading mb-5">Phone: 081336200198</div>
                    <div class="subheading mb-5">Address: Ruby A no 8, Kab. Tangerang, Indonesia</div>

                </div>
            </section>
            <hr class="m-0" />
       
        </div>
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="js/scripts.js"></script>
    </body>
</html>


Berikut tampilannya:

Terimakasih telah membaca post ini. Semoga bermanfaat!

Comments

Post a Comment

Popular posts from this blog

Tugas 3 PBKK - Static & Dynamic Currency Converter

Image
Tugas 3 PBKK - Static & Dynamic Currency Converter Nama: Joseph Eric Amadeo Seloatmodjo NRP: 05111840000077 Kelas: PBKK C Keseluruhan codes dan project Tugas 3 ini dapat diaksesi di Github saya:  Tugas 3 PBKK - Currency Converter 1. Static Currency Converter  Converter mata uang ini memiliki rates yang fix (tidak berubah-rubah). Berikut cara membuatnya:  1. Buka Visual Studio, pilih Create A New Project, lalu pilih windows forms app 2. Berikan nama project dan lokasi project, lalu tekan Create 3. Keseluruhan Design dan Code untuk app ini dapat dilihat digithub saya:  Static Currency Converter 4. Berikut converter saat bekerja:  2. Dynamic Currency Converter  Converter mata uang ini memiliki rates yang diambil secara real-time menggunakan API. Berikut cara membuatnya:  1. Buka Visual Studio, pilih Create A New Project, lalu pilih windows forms app 2. Berikan nama project dan lokasi project, lalu tekan Create 3. Keseluruhan Design dan Code untuk app ini dapat dilihat digithub saya: 
Read more

Tugas 9 PBKK - CRUD Dalam Codeigniter

Image
  Oleh: Nama: Joseph Eric Amadeo S. NRP: 05111840000077 Kelas: PBKK C Tugas 9 - Membuat Website CRUD dengan Codeigniter Pada tugas kali ini saya membuat website menggunakan codeigniter 4. Code Editor yang saya gunakan adalah Visual Studio Code, dan saya host web secara local menggunakan XAMPP. Semua code dibawah dapar dilihat di github saya: Link Repository Langkah pertama pembuatan website: 1. Download dan install XAMPP di komputer anda 2. Install codeigniter pada folder htdocs di folder xampp, untuk cara lengkapnya, dapat dilihat disini:  Install Codeigniter 4 3. Pada folder project yang dibuat, buka file app/config/Routes.php. Tambahkan codes berikut:  $routes -> get ( '/' ,  'Home::index' ); $routes -> group ( 'admin' ,  function ( $routes ){      $routes -> get ( 'mahasiswa' ,  'mhs::index' );      $routes -> get ( 'mahasiswa/(:segment)/preview' ,  'mhs::preview/$1' );      $routes -> add ( 'mahasiswa/new&#
Read more

Tugas 7 PBKK - Mobile Development with Xamarin

Image
  Oleh: Nama: Joseph Eric Amadeo S. NRP: 05111840000077 Kelas: PBKK C Tugas 7 - Mobile Application dengan Xamarin Xamarin adalah alat pengembangan lintas platform yang memungkinkan pengembang membangun aplikasi iOS dan Android, serta aplikasi Windows dan Mac, menggunakan satu basis kode C# bersama. Berikut langkah-langkah pengerjaannya: 1. Install Visual Studio Community 2019. Link Download dapat dilihat disini: Download Visual Studio 2. Menginstall Mobile Development with .Net pada Visual Studio. Dapat dilakukan dengan membuka visual studio installer, lalu klik modify, dan centang Mobile Development with .Net  3. Buat project baru: pilih Create New Project, lalu pilih Mobile App (Xamarin.Forms). 4. Set-up emulator untuk debugging. Saya menggunakana Pixel 2 Pie 9.0 untuk debug project ini 5. Ubah MainPage.xaml dan MainPage.xaml.cs sesuai kebutuhan. 6.  Code lengkap dapat dilihat dilink github: Link Github Terima kasih telah membaca, semoiga bermanfaat!
Read more