Laporan Pembuatan Web

Nama Kelompok:4

Nama Anggota Kelompok:

Gifarly Muhammad Afdalash

Muh Nur Fadlan

Agusta Indra Kusuma Putra

Bagas Zainul Muttaqin

SMKN 4 KENDARI 2023

 KATA PENGANTAR

Puji syukur kami panjatkan Tuhan yang maha

esa,karena atas berkah,rahmat,dan
karunianya,penyusunan laporan ini tentang
pembrograman website , kopetensi keahlian
Rekayasa Perangkat lunak,dapat diselesaikan.
Dalam makalah ini di sajikan beberapa pembahasan
materi mengenai XAMPP DAN PERANCANGAN
APLIKASI , dan di laporan ini memiliki coding di
sertai contoh untuk mempermudah siswa/siswi
dalam memahami pembahasan materi.
Ucapan terimah kasih kami sampaikan kepada
semua anggota kelompok yang telah membantu
menyelesaikan laporan tersebut sehingga dapat di
sajikan dengan baik
 DAFTAR ISI

COVER …………………………………………………………………………
KATA …………………………………………………………………………
DAFTAR ISI ……………………………………………………………………

BAB I PENDAHULUAN ………………………………………………………

A.Latar Belakang Masalah……………………………………………
B.Rumusan Masalah……………………………………………
C.Tujuan Masalah……………………………………………

BAB II
PEMBAHASAN………………………………………………………………
A.Xampp……………………………………………
B.Bootstrap……………………………………………
C.Codeigniter……………………………………………
D.Php……………………………………………

BAB III PERANCANGAN APLIKASI…………………………………………

A.Instalasi Xampp……………………………………………
B.Instalasi Composer……………………………………………
C.Instalasi Git……………………………………………
D.Instalasi Codeigniter……………………………………………
E.Pemasangan Boostrap Ke Codeigniter…………………………………
F.Perkodingan ……………………………………………

BAB IV PENUTUP……………………………………………
A.Kesimpulan……………………………………………
B.Saran……………………………………………

Daftar Pustaka……………………………………………
 BAB 1 PENDAHULUAN

A.Latar Belakang Masalah

Website adalah media yang digunakan untuk menampung data teks,

gambar, suara, dan animasi yang dapat ditampilkan di internet dan dapat
diakses oleh komputer yang terhubung dengan internet secara global.
Website merupakan media informasi berbasis jaringan komputer yang dapat
diakses dimana saja dengan biaya relatif murah. Website merupakan bentuk
implementasi dari bahasa pemograman web (web programming). PHP
(Hypertext Preprocessor) merupakan bahasa pemograman berbasis web
yang memiliki kemampuan untuk memproses dan mengolah data secara
dinamis

B.Rumusan Masalah
 BAB II PEMBAHASAN

A.Xampp

Pengertian Xampp

XAMPP adalah sebuah paket perangkat lunak (software) komputer yang sistem
penamaannya diambil dari akronim kata Apache, MySQL (dulu) / MariaDB (sekarang),
PHP, dan Perl. Sementara imbuhan huruf “X” yang terdapat pada awal kata berasal dari
istilah cross platform sebagai simbol bahwa aplikasi ini bisa dijalankan di empat sistem
operasi berbeda, seperti OS Linux, OS Windows, Mac OS, dan juga Solaris.

Komponen-komponen XAMPP

XAMPP mempunyai 5 komponen yaitu sebagai berikut:

 X = Cross Platform

Merupakan kode penanda untuk software cross platform atau yang bisa berjalan di
banyak sistem operasi. Jadi, ada XAMPP untuk Windows, xampp for mac, dan untuk
Linux. Semua itu bersifat free download xampp.

 A = Apache
 Apache adalah aplikasi web server yang bersifat gratis dan bisa dikembangkan oleh
banyak orang (open source).

 M = MySQL / MariaDB

MySQL atau MariaDB merupakan aplikasi database server yang dikembangkan oleh
orang yang sama. MySQL berperan dalam mengolah, mengedit, dan menghapus
daftar melalui database.

 P = PHP

Huruf “P” yang pertama dari akronim kata XAMPP adalah inisial untuk
menunjukkan eksistensi bahasa pemrograman PHP. Bahasa pemrograman ini
biasanya digunakan untuk membuat website dinamis, contohnya dalam website
berbasis CMS WordPress.

P = Perl

Sementara itu, untuk huruf P selanjutnya merupakan singkatan dari bahasa

pemrograman Perl yang kerap digunakan untuk memenuhi berbagai macam
kebutuhan. Perl ini bisa berjalan di dalam banyak sistem operasi sehingga sangat
fleksibel dan banyak digunakan.

Fungsi XAMPP
Program aplikasi XAMPP berfungsi sebagai server lokal untuk mengampu berbagai
jenis data website yang sedang dalam proses pengembangan.Dalam prakteknya, XAMPP
bisa digunakan untuk menguji kinerja fitur ataupun menampilkan konten yang ada
didalam website kepada orang lain tanpa harus terkoneksi dengan internet, cukup akses
melalui Xampp control panel, atau istilahnya website offline.XAMPP bekerja secara
offline layaknya web hosting biasa namun tidak bisa diakses oleh banyak orang.Maka
dari itu, XAMPP biasanya banyak digunakan oleh para mahasiswa maupun pelajar untuk
melihat hasil desain website sebelum akhirnya dibuat online menggunakan web hosting
yang biasa dijual dipasaran.
Kelebihan XAMPP

Kelebihan XAMPP antara lain:

 Database Storage Engine ini banyak digunakan oleh programmer apalagi oleh
web developer karena sifatnya yang free. Untuk yang expert sudah ada yang
bayar.
  Kemampuannya sudah bisa diandalkan, mempunyai kapasitas yang cukup
mumpuni sekitar 60.000 tabel dengan jumlah record mencapai 5.000.000.000
bahkan untuk yang terbaru sudah lebih.
 Keamanan datanya cukup aman walaupun tidak sehebat Postgre apalagi
Oracle.
 Engine ini multiplatform sehingga mampu diaplikasikan di berbagai sistem
operasi. My Sql cocok diaplikasikan diaplikasi kelas kecil dan menengah.
 Kelebihan paling utama engine ini adalah kecepatannya.

Kekurangan XAMPP

Kekurangan XAMPP antara lain:

 Tidak cocok untuk menangani data dengan jumlah yang besar, baik untuk
menyimpan data maupun untuk memproses data.
 Memiliki keterbatasan kemampuan kinerja pada server ketika data yang
disimpan telah melebihi batas maksimal kemampuan daya tampung server
karena tidak menerapkan konsep Technology Cluste

B.Bootstrap

 Pengertian Bootstrap
Bootstrap adalah framework web development berbasis HTML, CSS, dan JavaScript
yang dirancang untuk mempercepat proses pengembangan web responsive dan mobile-
first (memprioritaskan perangkat seluler), Selain bisa digunakan untuk mengembangkan
website dengan lebih cepat, Bootstrap adalah framework gratis yang bersifat open-source.
Skrip dan syntax yang disediakan Bootstrap bisa diterapkan untuk berbagai komponen
dalam desain web.
 Fungsi Bootstrap

Tujuan dan fungsi Bootstrap adalah untuk membuat website responsive dan mobile-
first. Jadi, semua elemen antarmuka website dipastikan bisa bekerja secara optimal di
semua ukuran layar, baik desktop maupun perangkat seluler.

 Keunggulan Bootstrap

Keunggulan dalam cara menggunakan Bootstrap adalah sifatnya yang responsif. Sifat
responsif ini bisa digunakan untuk menguji situs web yang baru dibuat pada beberapa
 perangkat, seperti ponsel, komputer, dan lainnya. Kebutuhan situs web yang responsif
adalah sebuah keharusan, sehingga menggunakan Bootstrap merupakan pilihan yang
tepat. Dikutip dari Digital Mad, Bootstrap dapat menyesuaikan tata letak situs web yang
akan ditampilkan.Bootstrap juga bisa mempercepat pengerjaan desain web dan
meningkatkan alur kerja pengembangnya. Hal itu dikarenakan Bootstrap mudah
disesuaikan, Dengan menggunakan Bootstrap, penghapusan CSS maupun JavaScript yang
tidak diperlukan dapat dilakukan dengan cepat.

 Kelemahan Bootstrap

Selain keunggulan, Bootstrap juga memiliki kelemahan. Mengutip laman Career

Foundry, Bootstrap memiliki sintaks yang membingungkan sehingga cukupmenyulitkan
para programmer. Selain itu, Bootstrap juga berukuran sangat besar. Hal ini dapat
mengakibatkan waktu untuk load situs web menjadi lebih lambat dan berat.

C.Codeigniter
 Pengertian Codeigniter

Codeigniter adalah salah satu framework populer khusus application dan web
development berbasis Model-View-Controller (MVC). Hadir sebagai platform open-
source, codeigniter banyak digunakan developer untuk mengembangkan website dengan
bahasa pemrograman PHP. Tujuan penggunaan framework codeigniter yaitu untuk
mempercepat dan mempermudah pengembang menyelesaikan proyek.

 Fungsi Codeigniter

Fungsi CodeIgniter yaitu sebagai berikut:

1. Mempercepat dan mempermudah kita dalam pembuatan website.

2. Menghasilkan struktur pemrograman yang sangat rapi, baik dari segi kode
maupun struktur file phpnya.
3. Memberikan standar coding sehingga memudahkan kita atau orang lain untuk
mempelajari kembali system aplikasi yang dibangun.

 Kelebihan Codeigniter

Kelebihan CodeIgniter yaitu sebagai berikut:

 1. Berukuran sangat kecil. File download nya hanya sekitar 2MB, itupun sudah
includedokumentasinya yang sangat lengkap.
2. Dokumentasi yang bagus. Saat anda mendownloadnya, telah disertakan
dengan dokumentasi yang berisi pengantar, tutorial, bagaimana panduan
penggunaan, serta referensi dokumentasi untuk komponen-komponennya.
3. Kompitabilitas dengan Hosting. CodeIgniter mampu berjalan dengan baik
pada hampirsemua platfom hosting. CodeIgniter juga mendukung database-
database paling umum, termasuk MySQL.

 Kekurangan codeigniter

Kekurangan CodeIgniter yaitu sebagai berikut:

1. CodeIgniter tidak ditujukan untuk pembuatan web dengan skala besar.

2. Library yang sangat terbatas. Hal ini dikarenakan sangat sulit mencari plugin
tambahan yang terverifikasi secara resmi, karena pada situsnya CodeIgniter
tidak menyediakan plugin-plugin tambahan untuk mendukung pengembangan
aplikasi dengan CI.
3. Belum adanya editor khusus CodeIgniter, sehingga dalam melakukan create
project dan modul-modulnya harus berpindah-pindah folder.

 Fitur-fitur codeigniter
Fitur-fitur Codeigniter yaitu:

1. MVC

Fitur utama yang dianggap membesarkan nama CodeIgniter adalah MVC atau
Model-View-Controller architecture.MVC ini merupakan praktik standar industri
saat bekerja dengan aplikasi web. MVC berfungsi untuk memisahkan data, logika
bisnis, dan presentasi dalam aplikasi.

2. Built-in-library

Fitur berikutnya yang menjadi keunggulan dari CodeIgniter dari framework

PHP lainnya adalah built-in-library.Di dalam built-in-library ini, pengguna bisa
menemukan berbagai solusi terkait coding, serta buku, tutorial dan petunjuk
penggunaan menarik seputar CodeIgniter.Ini berarti tantangan apa pun yang kamu
miliki, kemungkinan besar seseorang telah mengalami masalah tersebut,
menyelesaikannya, dan menempatkan solusinya untukmu dalam built-in-
library.Dalam kata lain, developer CodeIgniter memiliki dokumentasi yang
 lengkap mengenai cara kerja sistem aplikasi ciptaannya serta seputar dunia
development PHP.

3. Extremely light weight

Pengguna cenderung menyukai aplikasi yang dapat dimuat dengan sangat

cepat.Nah, jika pernah bekerja dengan beberapa framework modern, kamu akan
menyadari bahwa mereka membutuhkan waktu kurang dari satu detik untuk
memuat setelah instalasi. Sementara itu, CodeIgniter dapat dimuat oleh device
dalam waktu kurang dari 50 milisekon. Waktu ekstra yang biasanya dihabiskan
untuk optimalisasi seperti yang terjadi di framework lain dibebaskan saat kamu
bekerja dengan CodeIgniter.Fitur yang memungkinkan kecanggihan ini disebut
juga dengan “Extremely light weight”.

4. Source code yang kecil

Fitur selanjutnya yang dapat dimanfaatkan dari framework CodeIgniter adalah

source code yang kecil.Seluruh source code dalam framework CodeIgniter hanya
mendekati 2MB.Ukuran ini memudahkan pengguna untuk menguasai CodeIgniter
dan sistem kerjanya. Tak hanya itu, source code yang kecil juga secara tidak
langsung menyederhanakan penerapan dan pembaruan sistem aplikasi.

D.Php

 Pengertian Php
PHP Adalah bahasa scripting server-side, Bahasa pemrograman yang digunakan
untuk mengembangkan situs web statis atau situs web dinamis atau aplikasi Web. PHP
singkatan dari Hypertext Pre-processor, yang sebelumnya disebut Personal Home Pages.
Script sendiri merupakan sekumpulan instruksi pemrograman yang ditafsirkan pada saat
runtime. Sedangkan Bahasa scripting adalah bahasa yang menafsirkan skrip saat runtime.
Dan biasanya tertanam ke dalam lingkungan perangkat lunak lain.
 Fungsi Php
Fungsi PHP adalah membuat atau mengembangkan situs web statis atau situs web
dinamis atau aplikasi Web, PHP juga dapat digunakan untuk membuat website dinamis
bisa digunakan untuk menyimpan data ke dalam database, membuat halaman yang dapat
berubah-ubah sesuai dengan input  user, memproses form, dll.
 Syntax Php
Pengertian Syntax PHP adalah aturan penulisan agar mampu dimengerti dengan
benar oleh compiler saat membaca bahasa pemrograman. Dalam penulisan PHP yang
 benar diawali dengan “<?php” dan diakhiri dengan “?>”. Dan di dalam File PHP juga
dapat berisi tag seperti HTML dan skrip sisi klien seperti JavaScript.

Contoh Penulisan Syntax PHP yang Benar yaitu:

<?php

        echo ‘Hello World’ ;

?>

 Kelebihan Php
Kelebihan Php yaitu antara lain:

 Bersifat Open Source

Bahasa PHP dapat diakses oleh semua orang dengan melakukan download
dari open source dan mendapatkannya dengan gratis. Ini artinya Anda dapat
melakukan download dimanapun dan akan siap untuk digunakan dalam
mengembangkan website.

 Lebih fleksibel

Bahasa ini sangat fleksibel, dimana Anda dapat dengan mudah

mengkombinasikan fungsi yang ada dengan bahasa pemrograman lainnya. Anda juga
dapat menggunakan packages yang merupakan teknologi yang efektif untuk setiap
fiturnya.

 Pemuatan yang lebih cepat

Anda dapat dengan mudah memuat aplikasi berbasis PHP dan

menghubungkannya ke database. Developer menggunakannya karena memiliki
kecepatan pemuatan yang cepat meskipun koneksi internet lambat.

 Lebih stabil

Karena bersifat open source, artinya semua orang dapat ikut membantu
mengembangkan bahasa pemrograman ini menjadi lebih baik yang membuat PHP
sangat stabil selama bertahun- tahun dan dapat memberikan dukungan berkelanjutan.
  Koneksi ke database yang baik

Salah satu kelebihan lainnya adalah koneksi database built-in yang membantu
untuk menghubungkan database seperti MySQL, MariaDB, MongoDB, dan
sebagainya dimaka kelebihhan ini akan mengurangi waktu dalam pengembangan
website Anda.

 Membantu meningkatkan peluang kerja

Dikarenakan PHP merupakan bahasa pemrograman popular hingga saat ini,

banyak perusahaan yang mencari developer dengan pengetahuan bahasa ini yang
mana akan mendatangkan lowongan kerjanya tersendiri.

 Kekurangan Php

Kekurangan Php yaitu antara lain:

 Keamanan yang kurang terjamin

Bersifat open source belum tentu baik karena PHP dari segi keamanan tidak
cukup aman karena semua orang dapat melihat file teks ASCII Anda yang tersedia
dengan mudah.

 Perfoma yang lemah

Sayangnya PHP tidak mendukung penggunaan banyak fitur dalam satu waktu.
Jika Anda mencoba menggunakan beberapa fitur dari framework atau tools tertentu,
maka akan menyebabkan perfomansi yang buruk saat Anda telah mengembangkan
aplikasi online.

 Tidak adanya akses untuk melakukan modifikasi

Kekurangan lainnya adalah PHP tidak memberikan izin untuk mengubah

behavior inti dari aplikasi online. Sehingga jika Anda memiliki beberapa fungsi yang
lebih kompleks, Anda mungkin memerlukan tambahan bahasa pemrograman lainnya.
  Cara melakukan Handling Error yang kurang tangguh

Banyak developer yang telah menemukan celah pada code PHP sehingga
rentan terhadap handling error karena kurangnya alat untuk melakukan debugging
dan peringatan error. Anda mungkin akan menemukan beberapa bug pada aplikasi
Anda yang tidak terlihat letak kesalahannya, sehingga mungkin akan sedikit
menyulitkan Anda.

BAB III PERANCANGAN APLIKASI

A. Instalasi Xampp

 3 Langkah Cara Instal XAMPP di Windows

Berikut adalah tiga langkah mudah untuk menginstal XAMPP di komputer Anda:

1. Download XAMPP

Download XAMPP terbaru melalui website Apache Friends berikut ini.

2. Instal XAMPP

1. Lakukan instalasi setelah Anda selesai mengunduh. Selama proses instalasi

mungkin Anda akan melihat pesan yang menanyakan apakah Anda yakin
akan menginstalnya. Silakan tekan Yes untuk melanjutkan instalasi.

2. Klik tombol Next.

3. Pada tampilan selanjutnya akan muncul pilihan mengenai komponen mana dari
XAMPP yang ingin dan tidak ingin Anda instal. Beberapa pilihan seperti Apache
dan PHP adalah bagian penting untuk menjalankan website dan akan otomatis
diinstal. Silakan centang MySQL dan phpMyAdmin, untuk pilihan lainnya
biarkan saja.
4. Berikutnya silakan pilih folder tujuan dimana XAMPP ingin Anda instal.
Contohnya di direktori C:\xampp.

 
5. Pada halaman selanjutnya, akan ada pilihan apakah Anda ingin menginstal
Bitnami untuk XAMPP, dimana nantinya dapat Anda gunakan untuk install
WordPress, Drupal, dan Joomla secara otomatis.

6. Pada langkah ini proses instalasi XAMPP akan dimulai. Silakan klik tombol Next.
7. Setelah berhasil diinstal, akan muncul notifikasi untuk langsung menjalankan
control panel. Silakan klik Finish.
 3. Jalankan XAMPP

Silakan buka aplikasi XAMPP kemudian klik tombol Start pada Apache dan
MySQL. Jika berhasil dijalankan, Apache dan MySQL akan berwarna hijau seperti
gambar di bawah ini.

B.Instalasi Composer

1. Download File Composer

Sebelum melakukan instalasi, hal pertama yang harus dilakukan adalah mengunduh
file Composer. setelah mengunduh kita klik file tersebut lalu akan muncul gambar
seperti di bawah ini.setelah muncul gambar seperti di bawah ini kita Memilih opsi
instal for all user recomended
2. Install Composer

Setelah selesai download file Composer, buka file tersebut dan ikuti instruksi
instalasi di bawah ini:Pertama akan muncul halaman seperti pada gambar dibawah
ini. Klik Next untuk melanjutkan ke proses instalasi.

3. Tentukan Lokasi File Instalasi

Selanjutnya Anda akan diminta untuk menentukan lokasi file php (php.exe) yang
akan digunakan pada command line (PHP CLI- Command Line Interface).File
tersebut biasanya berada di dalam folder php. Jika Anda menggunakan XAMPP,
lokasi file ini akan berada di  C:\xampp\php. Pastikan pilih lokasi instalasi Composer
berjalan di C:\xampp\php\php.exe. Klik Next apabila lokasi file php sudah benar.
4. Pilih Penggunaan Proxy

Kemudian Anda akan diminta untuk memilih, apakah Anda akan menggunakan
proxy atau tidak. Jika Anda ingin menggunakan proxy, klik centang dan masukkan
URL proxy Anda. Apabila Anda tidak ingin menggunakan proxy, langsung klik Next
untuk melanjutkan instalasi.

5. Review Lokasi Instalasi

Selanjutnya pastikan kalau proses instalasi berjalan di lokasi file yang seharusnya,
yaitu C:\xampp\php\php.exe. Jika sudah benar, klik Install.
6. Instalasi Selesai

Proses instalasi selesai, klik Finish untuk menutup jendela instalasi Composer.
C.Instalasi Git

 Sebelum melakukan instalasi, hal pertama yang harus dilakukan adalah mengunduh
file Git terlebiih dahulu.setelah pengunduhan selesai klik file instaler Git yang sudah
diunduh.

 Setelah itu maka akan muncul infomasi lisensi Git, klik Next untuk melanjutkan.
 Selanjutnya menentukan lokasi instalasi. Biarkan saja apa adanya, kemudian klik Next

 Selanjutnya pemilihan komoponen, biarkan saja seperti ini kemudian klik Next
 elanjutnya pemlilihan direktori start menu, klik Next

 Selanjutnya pengaturan PATH Environment. Pilih yang tengah agar perintah git dapat
di kenali di Command Prompt (CMD). Setelah itu klik Next
 Selanjutnya konversi line ending. Biarkan saja seperti ini, kemudian klik Next

 Selanjutnya pemilihan emulator terminal. Pilih saja yang bawah, kemudian klik Next
 Selanjutnya pemilihan opsi ekstra. Klik saja Next.

 Selanjutnya pemilihan opsi ekspreimental, langsung saja klik Install untuk memaulai
instalasi.
 Tunggu beberapa saat, instalasi sedang dilakukan.

 Setelah selesai, kita bisa langsung klik Finish.

D.Instalasi Codeigniter 4
1. Untuk melakukan instalasi manual, download file zip dari CodeIgniter 4 melalui
website resminya.

2. Setelah file CodeIgniter 4 berhasil terdownload, pindahkan file ke

folder C:/xampp/htdocs. Kemudian, extract file zip tersebut dan ubah namanya
sesuai dengan nama project yang Anda inginkan. Di tutorial ini, kami menggunakan
nama ci4.
 3. Project CodeIgniter ini sudah bisa langsung dijalankan di web browser Anda dengan
mengakses localhost/ci4/public. Tapi, jangan lupa jalankan dulu XAMPP-nya, ya.

E. Pemasangan Boostrap Ke Codeigniter 4

 .Setelah berhasil menginstall framework Codeigniter 4 pada web server, kemudian
download juga template bootstrap dan disini saya menggunakan Dalam project CI pada
folder “public” buatlah satu folder dengan nama “assets”, lalu kopikan folder dan file
pendukung template Gentelella Alela! seperti folder “build”, folder “images”, folder
“src”, serta folder “vendors” kedalam folder “assets” yag telah kita buat sebelumnya.
Sehingga susunan foldernya akan tampak seperti berikut.
 Lalu buatlah satu buah folder dengan nama “template” pada folder “app/Views” dan
kopi salah satu file index.html dari folder master template Gentelella Alela! dan
letakkan pada folder “app/Views/template”, dan ubahlah file tersebut serta extensi
menjadi file “_template.php”, sehingga struktur peletakkan file template akan tampak
seperti dibawah ini.

 Kemudian cari tag yang berisikan tag untuk meload file CSS dan JavaScript  <link
href=”../vendors/bootstrap/dist/css/bootstrap.min.css” rel=”stylesheet”> lalu ubahlah
menjadi <link href=”<?php echo
base_url();?>/public/assets/vendors/bootstrap/dist/css/bootstrap.min.css”
rel=”stylesheet”> seperti yang terlihat pada gambar struktur template diatas.
 Langkah selanjutnya adalah memanggil file template yang telah kita siapkan tadi, buka
file controller “Home.php” pada folder “app/Controllers/Home.php”, pada method
index() kita panggil file template dengan kode dibawah ini:

<?php namespace App\Controllers;

class Home extends BaseController

public function index()

return view('template/_template');
 }

}
 Jika tahap demi tahap diatas sudah kita lalui, tahap selanjutnya adalah kita melakukan
testing apakah template sudah terintegrasi dengan baik, buka browser Anda lalu akses
project kerja Anda melalui alamat localhost/namaproject/public/, jika berjalan dengan
baik maka akan terlihat hasilnya seperti gambar dibawah ini:

F. Percodingan view,controlerr,models

 Menu View terdiri dari berbagai file yaitu?

a.?