LAPORAN PRAKTIK KERJA INDUSTRI

(PRAKERIN)
PEMBUATAN APLIKASI WEBSITE COMPANY
PROFILE KELOMPOK 13 PPITK – ITB DENGAN
VISUAL STUDIO CODE 1.5 2
DI PPITK-ITB

COVER

Nama : M Haekal Mubarok

NIS : 192001017

Kompetensi Keahlian : Rekayasa Perangkat Lunak

BIDANG KEAHLIAN TEKNOLOGI INFORMASI DAN

KOMUNIKASI SMK TELEKOMUNIKASI TELESANDI
BEKASI
2021
 LEMBAR PERSETUJUAN PEMBIMBING
UNTUK MENGIKUTI UJI PRAKERIN

Siswa dengan identitas di bawah ini :

Nama : M Haekal Mubarok

NIS 192001017

Kompetensi Keahlian : Rekayasa Perangkat Lunak

Judul Laporan : Pembuatan Aplikasi company proifle kelompok 13

Berbasis Website dengan Visual Studio Code 1.54
di PPITK-ITB
Dinyatakan telah selesai melaksanakan penulisan Laporan Praktik Kerja Industri
(Prakerin), sehingga yang bersangkutan diizinkan mengikuti Uji Prakerin.
Bekasi, 24 Maret 2021

Pembimbing Sekolah Kepala Program

Ine Yulianti, S.Pd Marissa Dewi Sartika, S.Kom

NPK. 2008 0005 NPK. 2008 0011

ii
 LEMBAR PENGESAHAN UJI PRAKERIN

Laporan Praktik Kerja Industri (Prakerin) ini telah disidangkan pada :

Hari/ Tanggal : Rabu, 24 Mareet 2021
Pukul : 13.00 – 13.30

Ruang : 21 (dua puluh satu)

Hasil : …………………………….

Keterangan ini dibuat dengan sebenar-benarnya.

Bekasi, 24 Maret 2021

Penguji Nama Tanda Tangan

1. Penguji 1 Tiara Kusuma Dewi, S.Tr ..................

2. Penguji 2 Jaja Subagja, S.Si ..................

Mengetahui

Kepala Sekolah Wakabid. Hubin

Guruh Wijanarko, S.T. Syarif Hidayatulloh, S.Sos

NPK. 2008 0002 NPK. 2008 0028

iii
 MOTTO

“KERJA KERAS”

KATA PENGANTAR

iv
Puji syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa atas
karunia dan hidayah-Nya, penulis masih diberikan kesempatan untuk
dapat menyelesaikan laporan ini yang berjudul “Pembuatan Aplikasi
Daily Report Berbasis Website dengan Laravel 5.8 di Cyberlabs”. Penulis
mengikuti Praktik Kerja Industri di Cyberlabs yang bertempat di Bandung
selama dua bulan yang dimulai pada tanggal 08 Januari sampai 06 Maret
2020. Dari semua yang telah penulis pelajari, penulis mengetahui
beberapa pekerjaan yang berhubungan dengan segala hal tentang
Programming. Oleh karena itu, penulis membuat laporan ini dengan
tujuan sebagai syarat bahwa penulis telah mengikuti Praktik Kerja
Industri. Penulis yakin bahwa laporan ini masih jauh dari sempurna dan
masih banyak kekurangannya. Pada kesempatan ini penulis
menyampaikan ucapan terima kasih kepada yang terhormat:

1. Guruh Wijanarko, S.T. selaku Kepala SMK Telekomunikasi Telesandi

yang telah memberikan izin dan hal-hal yang berhubungan dengan
pelaksanaan Praktik Industri di Cyberlabs.
2. Syarif Hidayatulloh, S.Sos. selaku Wakil Kepala Sekolah Hubungan
Industri yang telah menyalurkan penulis ke dunia industri.
3. Marissa Dewi Sartika, S.Kom, selaku Ketua Kompetensi Keahlian
Rekayasa Perangkat Lunak yang telah membimbing dan memberikan
pengarahan kepada penulis.
4. Ine Yulianti, S.Pd, selaku pembimbing sekolah yang telah
membimbing dan memberikan pengarahan penulis dalam pembuatan
laporan.
5. Kedua orang tua, kakak dan adik penulis yang telah memberikan
dukungan secara moril maupun materiil.
6. Pihak-pihak yang tidak dapat penulis sebutkan satu per satu, atas
bantuan dan doa restu yang berhubungan dengan kegiatan Praktik
Kerja Industri.

v
Akhirnya penulis hanya dapat berharap semoga laporan ini dapat diterima
dan bermanfaat bagi para pembaca untuk menambah pengetahuan atau
sebagai acuan untuk membuat laporan selanjutnya serta memperluas
wawasan.

Bekasi, 24 Maret 2021

penulis
 DAFTAR ISI

COVER...................................................................................................................ii
LEMBAR PERSETUJUAN PEMBIMBING........................................................ii
LEMBAR PENGESAHAN UJI PRAKERIN.......................................................iii
MOTTO.................................................................................................................iv
KATA PENGANTAR.............................................................................................v
DAFTAR ISI........................................................................................................vii
DAFTAR GAMBAR............................................................................................viii
DAFTAR TABEL..................................................................................................ix
BAB I PENDAHULUAN.......................................................................................1
A. Latar Belakang........................................................................................1
B. Tujuan Penulisan.....................................................................................2
C. Pokok Masalah.........................................................................................2
D. Batasan Masalah.....................................................................................2
BAB II URAIAN UMUM.......................................................................................3
A. Sejarah Perusahaan.................................................................................3
B. Struktur Organisasi..................................................................................4
C. Tata Tertib Pelaksanaan Prakerin...........................................................5
1. Peraturan Sekolah................................................................................5
2. Peraturan Industri.................................................................................6
BAB III JURNAL PRAKERIN............................................................................8
A. Teori Dasar..............................................................................................8
B. Gambaran Umum....................................................................................9
C. Gambar Kerja........................................................................................11
D. Alat dan Bahan......................................................................................12
E. Langkah Kerja.......................................................................................13
F. Hasil Kerja.............................................................................................68
BAB IV PENUTUP..............................................................................................71
A. Kesimpulan............................................................................................71
B. Saran......................................................................................................71
DAFTAR PUSTAKA.................................................................................72
BIODATA PENULIS................................................................................................

vii
 DAFTAR GAMBAR

Gambar 2.1 Logo Perusahaan...............................................................................

Gambar 2.2 Struktur Organisasi...........................................................................
Gambar 3.1 Flowchart aplikasi Company Profile kelompok 13............................
Gambar 3.2 Asus A407UF-BV061T......................................................................
Gambar 3.3 Logo Visual Studio Code 2019...........................................................
Gambar 3.4 Logo XAMPP......................................................................................
Gambar 3.5 Tampilan Awal XAMPP versi 3.2.4....................................................
Gambar 3.6Tampilan XAMPP 3.2.4 Setelah Start Apache dan MySQL.................
Gambar 3.7 Tampilan awal phpMyAdmin..............................................................
Gambar 3.8 Tampilan XAMPP 3.2.4 Saat Klik Action Admin pada
Module MySQL.......................................................................................................
Gambar 3.9 Tampilan awal phpMyAdmin..............................................................
Gambar 3.10 Membuat database pada phpMyAdmin.............................................
Gambar 3.11 Tampilan awal database ”userform”................................................
Gambar 3.12 Tampilan page tambah usertable baru..............................................
Gambar 3.13 Tampilan folder “pkl”......................................................................
Gambar 3.14 Tampilan folder aplikasi “company profile kelompok 13................
Gambar 3.15 Tampilan aplikasi “visual studio code 2019”..................................
Gambar 3.16 Tampilan pilihan membuka open file folder “company
profile kelompok 13”...............................................................................................
Gambar 3.17 Tampilan membuka open file folder “PKL” ...................................
Gambar 3.18 Tampilan home aplikasi “company profile kelompok 13”...............
Gambar 3.19 Tampilan about aplikasi “company profile kelompok 13”..............
Gambar 3.20 Tampilan article aplikasi “company profile kelompok 13”.............
Gambar 3.21Tampilan article aplikasi “company profile kelompok 13”..............
Gambar 3.22 Tampilan Registrions aplikasi “company profile kelompok 13”.........
Gambar 3.23 Tampilan form isi Registrions company profile kelompok 13.............
 DAFTAR TABEL

Tabel 3.1 Struktur table “userstable”.....................................................................

Tabel 3.2 kode “Register.php”..............................................................................
Tabel.3.3 Kode “abcd.css”......................................................................................
Tabel 3.4 kode “style.css” ......................................................................................
Tabel 3.5 kode “controllerUserData.php”.............................................................
Tabel 3.6 Kode “connection.php”...........................................................................
Tabel 3.7 Kode “signup-user.php”..........................................................................
Tabel 3.8 Kode “user-otp.php”...............................................................................
Tabel 3.9 Kode “home.php”....................................................................................
Tabel 3.10 Kode “forgot-paswword.php”...............................................................
Tabel 3.11 Kode “reset-code.php”..........................................................................
Tabel 3.12 Kode “new-paswword.php”..................................................................
Tabel 3.13 Kode “password-changed.php”............................................................

ix
 BAB I
PENDAHULUAN
A. Latar Belakang

Saat ini teknologi semakin jauh berkembang, oleh karena itu semakin
banyak minat perusahaan terhadap orang-orang yang ahli dalam
bidang teknologi atau biasa disebut IT. Semakin banyak pula
perusahaan yang bergerak dalam bidang teknologi, kebanyakan
perusahaan-perusahaan tersebut menawarkan jasa dalam pembuatan
aplikasi berbasis mobile, website, dan lain-lain. Kemajuan dalam
bidang teknologi juga berdampak pada meningkatnya lapangan kerja
dalam bidang teknologi yang dapat berupa programmer, designer,
dan lain- lain.
Oleh karena itu, aplikasi Company profile kelompok 133 ini dibuat
untuk memudahkan para programmer untuk melakukan laporan
harian mereka melalui situs website. Aplikasi Company profile
kelompok 13 nantinya dapat digunakan programmer untuk
melakukan laporan harian ke kantornya dengan mudah dan dapat
dilakukan dimana saja karena aplikasi ini berbasis website.
Aplikasi ini dibuat dengan menggunakan Visual studio code 1.52
yang membuat aplikasi ini menjadi lebih aman dan cepat dalam
pengerjaannya. Biasa untuk mengtahui isi materi tentang soil
moistcure yang dibuat oleh kelompok 13 yang sudah dibuat
Visual Studio Code merupakan editor kode sumber freeware yang
dibuat oleh Microsoft untuk Windows, Linux dan macOS. Fitur-
fiturnya termasuk dukungan untuk debugging, syntax highlighting,
intelligent code complete, snippet, code refactoring, dan embedded
Git. 
Berdasarkan uraian diatas, maka penulis mengambil judul
“Pembuatan Aplikasi Company profile kelompok 13 Berbasis
Website dengan PHP di PPITK-ITB” Sebagai laporan Prakerin ini.
B. Tujuan Penulisan

Tujuan pembuatan laporan Prakerin dengan judul “Pembuatan Aplikasi

Company Profile Berbasis Website Menggunakan PHP di PPITK-
ITB” adalah :
1. Menjelaskan tentang pengertian sistem soil moistcure ?
2. Dimana kah anda melaksankan pkl oniline ?

C. Pokok Masalah

Berdasarkan latar belakang yang telah diuraikan, maka pokok

permasalahan yang dihadapi penulis adalah :
3. Bagaimana cara mengatasi permasalahan para user dalam
melakukan registrasi atau ingin punya akun di website tersebut?
4. Bagaimana cara pembuatan aplikasi company profile ini?

D. Batasan Masalah

Berdasarkan pokok masalah di atas, dalam jurnal ini penulis hanya

membahas tentang cara pembuatan aplikasi company profile
kelompok 13 dengan php

2
 BAB II
URAIAN UMUM

A. Sejarah Perusahaan

Gambar 2.1 Logo Persuhaan

Pusat Penelitian Teknologi Informasi dan Komunikasi (PPTIK-ITB)
memiliki misi diantaranya adalah membangun reputasi riset dan peniliti
berkelas dunia. Hal ini menuntut selarasnya topik, kompetensi peneliti,
kelayakan fasilitas, tingginya aktivitas dan maraknya kemitraan global di
bidang penelitian ICT. Selain itu, PPTIK juga memiliki misi untuk
mendorong perkembangan produk komersil, enterpreneurship dan industri di
bidang ICT. Hal ini ditandai juga dengan signifikannya kontribusi sektor ICT
bagi revenue ITB.
Menjawab berbagai tantangan baru dari era ITB–Entrepreneurial University ,
kegiatan PPTIK pada kurun waktu 2015 – 2020 akan berfokus pada:
Pemantapan kapasitas organisasi PPTIK untuk berkolaborasi dengan
sebanyak mungkin pihak pada berbagai sektor dengan memanfaatkan
portfolio teknologi dan solusi yang telah dikembangkan oleh seluruh
stakeholder PPTIK.
Pemantapan peran PPTIK sebagai pionir dan rujukan dalam
pengembangan dan pemanfaatan teknologi dan solusi digital learning dengan
menerapan teknologi dan solusi digital learning kepada stakeholder yang
semakin luas dan beragam dengan memastikan munculnya inovasi
pembelajaran yang berbasis teknologi dan solusi digital learning dalam
bentuk model bisnis maupun startup digital learning.

3
 Peningkatan peran PPTIK sebagai pionir dan rujukan dalam
pengembangan dan pemanfaatan TIK dan solusi berbasis TIK untuk berbagai
sektor aplikasi dengan memastikan munculnya inovasi teknologi terkait yang
dapat didemonstrasikan dalam 3 bentuk yaitu publikasi ilmiah, prototype
yang berfungsi, pra-Startup.

VISI :
Setiap warga negara Indonesia harus dapat memanfaatkan TIK untuk kemajuan
perikehidupannya. Setiap warganegara dapat berpartisipasi dalam masyarakat
pengetahuan dan ekonomi pengetahuan, baik ikut mendapatkan manfaatnya
maupun ikut membangunnya. Di tahun 2016 setiap warga negara Indonesia
harus bisa mendapatkan jatah secara cuma-cuma.
MISI :
Membangun reputasi riset dan peneliti berkelas dunia. Hal ini menuntut
selarasnya topik, kompetensi peneliti, kelayakan fasilitas, tingginya aktivitas
dan maraknya kemitraan global di bidang penelitian ICT.
Mendorong perkembangan produk komersial, enterpreneurship, dan industri di
bidang ICT. Hal ini ditandai juga dengan signifikannya kontribusi sektor ICT
bagi revenue ITB.

B. Struktur Organisasi

Gambar 2.2 Stuktur organisasi

4
C. Tata Tertib Pelaksanaan Prakerin

1. Peraturan Sekolah
a. Menyelesaikan semua persyaratan untuk dapat melakukan Praktik
Kerja Industri yaitu :
1. Mempunyai nilai sikap minimal B yang menggambarkan kondisi
kedisiplinan dan sopan santun bersikap dalam kehidupan di
sekolah.
2. Tuntas untuk semua mata pelajaran di semester 1 sampai 3.
3. Menyelesaikan semua administrasi pendidikan.
b. Siswa yang melakukan Prakerin harus disetujui oleh Wakil Kepala
Bidang Hubungan Industri dan Kepala Sekolah.
c. Aktif mengikuti program Prakerin dengan waktu pelaksanaan
sesuai yang telah disepakati sekolah, siswa dan industri.
d. Mematuhi aturan dan tata tertib pihak industri / sekolah dan
melaksanakan program yang telah disepakati sekolah, industri dan
siswa.
e. Membina hubungan baik antara siswa, sekolah dan seluruh warga
lingkungan industri atau usaha.
f. Siswa yang terbukti melakukan pelanggaran tata tertib industri atau
usaha akan dikembalikan ke sekolah dan dikenakan sanksi disiplin
sekolah. Kelanjutan pelaksanaan Prakerin menjadi tanggung jawab
pribadi siswa.
g. Tindakan pelanggaran berat (tindak kekerasan, pencurian, tindakan
asusila dan kasus narkoba ) yang dilakukan siswa sehingga
menyebabkan dikeluarkan dari industri atau usaha akan mendapat
sanksi serupa dari sekolah yaitu dikeluarkan dari sekolah.
h. Membuat laporan kehadiran, laporan laporan harian, laporan
mingguan, dan jurnal melalui persetujuan pihak pembimbing sekolah
dan pembimbing industri.

5
 i. Membuat dan mempresentasikan jurnal Prakerin sesuai standar
baku yang telah ditetapkan oleh pihak sekolah (Bagian Hubungan
Industri).
j. Melaksanakan sidang prakerin sesuai dengan jadwal yang telah
ditentukan.
k. Hal lain yang diatur pihak dunia usaha dan industri wajib dipatuhi
siswa Prakerin.

2. Peraturan Industri
a. Mentaati semua ketentuan mengenai tata tertib.
b. Wajib hadir tepat waktu di tempat kerja sesuai dengan kalender
kerja dan jam kerja yang berlaku.
c. Wajib menginformasikan ke perusahaan jika tidak masuk karena
sakit ataupun izin dan memberikan surat izin.
d. Melaksanakan tugas dengan sebaik mungkin dengan penuh rasa
tanggung jawab.
e. Berkewajiban untuk bertutur kata dan berperilaku yang sopan dan
menjaga tata krama yang baik sesuai etika pergaulan.
f. Berpenampilan bersih dan rapih di lingkungan kerja.
g. Dilarang untuk merokok, minum minuman keras di lingkungan
kerja dan membawa senjata tajam ataupun senjata api ke tempat
kerja.
h. Dilarang melakukan perbuatan asusila atau melakukan perjudian
di tempat kerja.
i. Dilarang merusak barang serta sarana dan prasarana milik
perusahaan.
j. Dilarang meninggalkan pekerjaan pada saat jam kerja sebelum
mendapat izin.
k. Menggunakan peralatan safety ketika memasuki wilayah yang
mengharuskan menggunakan peralatan safety.

6
l. Jika menggunakan kendaraan bermotor roda 2, diwajibkan
menggunakan helm (half face atau full face) dan jaket, serta
dianjurkan menggunakan sarung tangan dan tidak ugal-ugalan.

7
 BAB III
JURNAL PRAKERIN

A. Teori Dasar

Pengertian MySQL
MySQL adalah sebuah database management system (manajemen basis data)
menggunakan perintah dasar SLQ (Structured Query Language) yang cukup
terkenal. Database management system (DBMS) MySQL multi pengguna dan multi
alur.

MySQL adalah DBMS yang open source dengan dua bentuk lisensi, yaitu Free
Software (perangkat lunak bebas) dan Shareware (perangkat lunak berpemilik yang
penggunaannya terbatas). Jadi MySQL adalah database server yang gratis dengan
lisensi GNU General Public License (GPL) sehingga dapat Anda pakai untuk
keperluan pribadi atau komersil tanpa harus membayar lisensi yang ada.
Seperti yang sudah disinggung di atas, MySQL masuk ke dalam jenis RDBMS
(Relational Database Management System). Maka dari itu, istilah semacam baris,
kolom, tabel, dipakai pada MySQL. Contohnya di dalam MySQL sebuah database
terdapat satu atau beberapa tabel.

SQL sendiri merupakan suatu bahasa yang dipakai di dalam pengambilan data pada
relational database atau database yang terstruktur. Jadi MySQL adalah database
management system yang menggunakan bahasa SQL sebagai bahasa penghubung
antara perangkat lunak aplikasi dengan database server.

Sejarah MySQL
MySQL adalah pengembangan lanjutan dari proyek UNIREG yang dikerjakan oleh
Michael Monty Widenius dan TcX (perusahaan perangkat lunak asal Swedia).
Kelebihan dan Kekurangan MySQL
Meskipun menjadi database yang cukup populer, MySQL tentu mempunyai
beberapa kelebihan dan kekurangan dibandingkan dengan database server lainnya.
Salah satu kekurangan MySQL adalah performanya turun di saat beberapa database
manajemen sistem mampu bekerja baik pada pengelolaan database yang besar.9

SQL
merupakan bahasa pemrograman yang perlu Anda pahami karena dapat

8
 merelasikan antara beberapa tabel dengan database maupun antar database. Ada
tiga bentuk SQL yang perlu Anda ketahui, yaitu Data Definition
Language (DDL), Data Manipulation Language(DML), dan Data Control
Language (DCL).

Website Website
diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data
gambar diam atau gerak, data animasi suara, video dan atau gabungan dari
semuanya. Baik yang bersifat statis maupun dinamis yang membentuk satu
rangkaian bangunan yang saling terkait dimana masing–masing dihubungkan
dengan jaringan–jaringan halaman (Permana, 2012).

PHP
adalah bahasa server-side scripting yang menyatu dengan HTML untuk membuat
halaman web yang dinamis. Maksud dari server-side scripting adalah sintaks dan
perintah-perintah yang diberikan akan sepenuhnya akan dijalankan diserver tetapi
disertakan pada dokumen HTML. Pembuatan web ini merupakan kombinasi antara
php sendiri sebagai bahasa pemrograman dan HTML sebagai pembangun halaman
web (Hendrianto, 2014).
Database
sering didefinisikan sebagai kumpulan data yang terkait. Secara teknis, yang
berada dalam sebuah database adalah sekumpulan tabel atau objek lain indeks, view
, dan lain-lain). Tujuan utama pembuatan database adalah untuk memudahkan
dalam mengakses data. Data dapat ditambahkan, dihapus, atau dibaca dengan relatif
mudah dan cepat. Saat ini tersedia banyak perangkat lunak yang ditujukan untuk
mengelola database (Permana, 2012)
Pada penyusunan laporan ini dibahas tentang materi yang didapat selama

B. Gambaran Umum

Aplikasi company profile kelompok 13 adalah aplikasi sebuah

perkenaalan
yang digambarkan melalui website dengan adanya team dan article
tentang membahas sebuah projek alat yaitu handtaizer, dan soil
moistucre.
Selain fitur home untuk mengetahui suatu awalan website yang
dibikin dengan secara menarik untuk user atau pegunjung tidak
melihat website dan article tidak bosan dan menarik tentu saja

9
Fitur article berfungsi untuk mengetahui materi yang anda di menu
website untuk mengetahui dan memperluas pengetahuan, dan
mengetahui fungsi dari alat tersebut.

Sedangkan, fitur Registirions adalah untuk user melakukan

pendaftaran data yang sudah tersedia di dalam table yaitu bernama
database dan membuat database tersebut bernama aplikasi XAMPP
v3.2.4.

Dalam Jurnal Prakerin ini dijelaskan apa saja yang perlu dibutuhkan
dan di- install untuk melakukan pembuatan aplikasi company profile
kelompok 13 berbasis website dengan menggunakan PHP.

Pada bab ini dijelaskan bagaimana cara pembuatan database

menggunakan XAMPP v3.2.4, mulai dari cara membuka aplikasi
XAMPP sampai dengan menghidupkan server dari XAMPP itu
sendiri.

Pada BAB III ini dijelaskan cara bagaimana cara menggunakan

XAMPP dan Visual Studio Code

10
C. Gambar Kerja

1. Flowchart aplikasi company profile kelompok 13.

Gambar 3.1 Flowchart aplikasi company profile 13

11
D. Alat dan Bahan
1. Hardware
a. Laptop Asus A407UF-BV061T 

Gambar 3.3 Asus A407UF-BV061T 

Spesifikasi:

1.  Intel Core i3-70200U 3,4Ghz.

2. RAM 4GB DDR4

3.  HDD 1 TB
2. Software
a. Studio code 2019

Gambar 3.4 Logo Visual Studio code 2019

Hardware Requirements :

 1.8 GHz or faster processor.

 2 GB of RAM
  Minimum of 800MB up to 210 GB of available space

12
 b XAMPP 3.2.4

Gambar 3.5 Logo

XAMPP Software Requirements :
Windows 2008, 2012, Vista, 7, 8 (Important: XP or 2003 not
supported) Hardware Requirements :
1. 64MB RAM

2. 450MB Free Space

E. Langkah Kerja

1. Membuka Aplikasi XAMPP versi 3.2.4

a. Buka aplikasi XAMPP versi 3.2.4.

Gambar 3.6 Tampilan Awal XAMPP versi 3.2.4

13
 b. Klik start pada Action Module Apache dan MySQL.

Gambar 3.7

Tampilan XAMPP 3.2.4 Setelah Start Apache dan MySQL

c. Klik Action Module Admin pada Module MySQL.

Gambar 3.8

Tampilan XAMPP 3.2.4 Saat Klik Action Admin pada Module MySQL

14
 d. Jika sudah melakukan Action Module Admin pada Module
MySQL maka akan muncul popup browser yang dipakai.

Gambar 3.9 Tampilan Awal phpMyAdmin

2. Membuat Database pada phpMyAdmin

A. Buat Database dengan nama “userfrom” lalu klik create.

Gambar 3.10 Membuat Database pada phpMyAdmin

15
 B. Tampilan awal Database “userfrom”.

Gambar 3.11 Tampilan awal database “userfrom”

C. Setelah dibuat, buka tambahkan usertable baru di phpMyAdmin.

Gambar 3.12 Tampilan page tambah usertable baru

D. Buat table “userstable” dengan struktur sebagai berikut.

Tabel 3.1 Struktur table “userstable”

Nama Table Nama Field Tipe Data

id(PK) Int (11)
Name
User
Email
Varchar(255)
table password
Code Mediumint(50)
Status text

1. Membuat Aplikasi Company Profile 13

16
 A Buat folder dengan nama “pkl”.

Gambar 3.13 Tampilan folder “pkl”

B. Tampilan folder “company profile kelompok 13”

Gambar 3.14 Tampilan folder “Company profile kelompok 13”

C. Tampilan pertama aplikasi ” visual studio code 2019”

Gambar 3.15 tampilan awal visual studio code 2019

D Membuka open file folder”PKL”

17
 Gambar 3.16 Membuka open file folder “PKL”
E Membuka folder “PKL”

Gambar 3.17 Membuka folder “PKL”

aa Membuka membuat file baru dengan nama localhost/pkl/Register.php

18
 untuk memulai awal beranda program dengan ketik di visual studio code
dengan nama file “Register.php”
Tabel 3.6 Kode”Register.php”
<!DOCTYPE html>
<html lang="en">
<head>

<!-- font awesome file link-->

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.2/css/all.min.css" >
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/cs
s/bootstrap.min.css">
<!-- custom css file link-->
<link rel="stylesheet" href="abcd.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
</head>
<body>

<!-- header section starts-->

<header class="header">

<div class="image">
<img src="image/itb.png" alt="">
</div>

<div class="fas fa-bars"></div>

<nav class="navbar">
<ul>

19
 <li><a href="#home">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#article">article</a></li>
<li><a href="#registirions">registirions</a></li>

</ul>
</nav>

</header>

<!-- header section ends-->

<!-- home section starts-->

<section id="home" class="home">

<h1 class="banner">PPITK-ITB</h1>
<h3 class="slogan">selamat datang di PPITK-ITB Kelompok 13</h3>
<a href="#"><button>Lets go !</button></a>

<div class="wave wave1"></div>

<div class="wave wave2"></div>
<div class="wave wave3"></div>

<div class="fas fa-cog nut1"></div>

<div class="fas fa-cog nut2"></div>

</section>

<!-- home section ends-->

<!-- about section starts-->

20
<section id="about" class="about">

<h1 class="heading">about us </h1>

<div class="row">

<div class="content">
<h3>Selamat datang di PPITK-ITB</h3>
<p>Pusat Penelitian Teknologi Informasi dan Komunikasi (PPTIK-
ITB) memiliki misi diantaranya adalah membangun reputasi riset dan
peniliti berkelas dunia. Hal ini menuntut selarasnya topik, kompetensi
peneliti, kelayakan fasilitas, tingginya aktivitas dan maraknya
kemitraan global di bidang penelitian ICT. Selain itu, PPTIK juga
memiliki misi untuk mendorong perkembangan produk komersil,
enterpreneurship dan industri di bidang ICT. Hal ini ditandai juga
dengan signifikannya kontribusi sektor ICT bagi revenue ITB.</p>
<P>VISI :</P>

<p>Setiap warga negara Indonesia harus dapat memanfaatkan TIK

untuk kemajuan perikehidupannya. Setiap warganegara dapat
berpartisipasi dalam masyarakat pengetahuan dan ekonomi
pengetahuan, baik ikut mendapatkan manfaatnya maupun ikut
membangunnya. Di tahun 2016 setiap warga negara Indonesia harus
bisa mendapatkan jatah secara cuma-cuma.</P>
<p>MISI :</p>
<P>Membangun reputasi riset dan peneliti berkelas dunia. Hal ini
menuntut selarasnya topik, kompetensi peneliti, kelayakan fasilitas,
tingginya aktivitas dan maraknya kemitraan global di bidang penelitian
ICT.
Mendorong perkembangan produk komersial, enterpreneurship, dan
industri di bidang ICT. Hal ini ditandai juga dengan signifikannya
kontribusi sektor ICT bagi revenue ITB.

21
 </P>
<a href="#"><button class="btn">read more</button></a>
</div>

<div class="image">
<img src="image/itb.png" alt="">
</div>

</div>

</section>

<!-- about section ends -->

<!-- Article section starts-->

<section id="article" class="article">

<h1 class="heading">article</h1>

<div class="row">

<div class="image">
<img src="image/soil moisture.jpg" alt="">
</div>
<div class="content">
<h3>Soil Moisture</h3>
<p>Soil Moisture adalah Sensor kelembaban tanah mengukur kadar
air volumetrik dalam tanah. Karena pengukuran gravimetri langsung
dari kelembaban tanah bebas membutuhkan pemindahan, pengeringan,
dan penimbangan sampel, </p>
</div>

22
 </div>

<div class="row">

<div class="content">
<h3>Handtaizer</h3>
<p>Handtaizer adalah Penyanitasi tangan adalah cairan atau gel yang
umumnya digunakan untuk mengurangi patogen pada tangan.
Pemakaian penyanitasi tangan berbasis alkohol lebih disukai daripada
mencuci tangan menggunakan sabun dan air pada berbagai situasi di
tempat pelayanan kesehatan.</p>
</div>
<div class="image">
<img src="image/Kids using hand sanitizer at school-bro.svg" alt="">
</div>
</div>

</section>

<!-- Article section ends-->

<!-- Registirions starts-->

<section id="Regis" class="Regis">

<?php require_once "controllerUserData.php"; ?>
<h1 class="heading">Registirions</h1>

<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 form login-form">
<form action="register.php" method="POST" autocomplete="">
<h2 class="text-center">Registirions</h2>

23
 <p class="text-center">Login with your email and
password.</p>
<?php
if(count($errors) > 0){
?>
<div class="alert alert-danger text-center">
<?php
foreach($errors as $showerror){
echo $showerror;
}
?>
</div>
<?php
}
?>
<div class="form-group">
<input class="form-control" type="email" name="email"
placeholder="Email Address" required value="<?php echo $email ?>">
</div>
<div class="form-group">
<input class="form-control" type="password"
name="password" placeholder="Password" required>
</div>
<div class="link forget-pass text-left">
<!-- <a href="forgot-password.php">Forgot password?</a>
-->
</div>
<div class="form-group">
<input class="form-control button" type="submit"
name="login" value="Login">
</div>
<div class="link login-link text-center">Not yet a member?

24
 <a href="signup-user.php">Signup now</a>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Registirions ends--->

Bb Buat file baru dengan nama dalam folder localhost/pkl/abcd.css

dengan nama “abcd.css” kemudian ketik script dibawah ini.
Tabel 3.7 Kode “abcd.css”
@import url('https://fonts.googleapis.com/css2?
family=Poppins:ital,wght@0,200;0,300;0,400;0,500;1,100;

25
 1,200;1,300;1,400;1,500&display=swap');

:root{
--color:#6C5CE7;
}

*{
font-family: 'Poppins', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
text-transform: capitalize;
transition: all .2s linear;
text-decoration: none;
}
html{
font-size: 62.5%;
}

body{
overflow-x: hidden;
}

.heading{
margin:2rem;
padding-top: 6rem;
display: inline-block;
font-size: 3.5rem;
color:var(--color);
position: relative;
letter-spacing: .2rem;

26
 }

.heading::before, .heading::after{
content: '';
position: absolute;
height: 2.5rem;
width: 2.5rem;
border-top:.4rem solid var(--color);
border-left:.4rem solid var(--color);
}

.heading::before{
top:5.8rem; left: -2rem;
}

.heading::after{
bottom:-.5rem; right: -2rem;
transform: rotate(180deg);
}

.btn{
outline: none;
border: none;
border-radius: 5rem;
background: var(--color);
color:#fff;
cursor: pointer;
height:3.5rem;
width: 15rem;
font-size: 1.7rem;
box-shadow: 0 .2rem .5rem rgba(0,0,0,.3);
}

27
.btn:hover{
letter-spacing: .1rem;
opacity: .8;
}

.header{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding:1rem 2rem;
position: fixed;
top:0; left: 0;
z-index: 100;
}

.header .logo{
font-size: 2.5rem;
color:#fff;
}

.header .logo i{
padding:0 .5rem;
}

.header .navbar ul{

list-style-type: none;
display: flex;
align-items: center;

28
 justify-content: space-around;
}

.header .navbar ul li{

margin:0 1.5rem;
}

.header .navbar ul li a{
font-size: 2rem;
color:#fff;
}

.header .navbar ul li a:hover{

color:#ccc;
}

.header .fa-bars{
color:#fff;
cursor: pointer;
font-size: 3rem;
display: none;
}

29
.home{

min-height: 100vh;

width: 100vw;

background:linear-gradient(purple, var(--color));

display: flex;

align-items: center;

justify-content: center;

flex-flow: column;

text-align: center;

padding:0 1rem;

position: relative;

overflow: hidden !important;

.home .banner{

color:#fff;

font-size: 5rem;

text-shadow: 0 .3rem .5rem rgba(0,0,0,.3);

.home .slogan{

30
 color:#eee;

font-size: 2.5rem;

font-weight: 400;

.home button{

height: 4rem;

width: 18rem;

background:#fff;

color: #444;

cursor: pointer;

border:none;

outline: none;

margin-top: 1rem;

font-size: 2rem;

font-weight: 400;

box-shadow: 0 .3rem .5rem rgba(0,0,0,.3);

.home button:hover{

letter-spacing: .1rem;

31
.home .wave{

position: absolute;

bottom: -.5rem;

left: 0;

height:11rem;

width: 100%;

background: url(wave.png);

background-size: 100rem 11rem;

background-repeat: repeat-x;

animation:waves 10s linear infinite;

.home .wave2{

animation-direction: reverse;

opacity: .2;

.home .wave3{

animation-duration: 4s;

opacity: .5;

32
 @keyframes waves{
0%{
background-position-x: 0;
}
100%{
background-position-x: 100rem;
}
}

.home .fa-cog{
position: absolute;
font-size: 30rem;
opacity: .15;
color:#fff;
animation: rotate 10s linear infinite;
}

.home .nut1{
top:10%; left: -15rem;
}

.home .nut2{
bottom:23%; right: -13rem;
animation-direction: reverse;
}

@keyframes rotate{
100%{
transform: rotate(360deg);
}
}

33
.about{
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
overflow: hidden;
}

.about .row{
display: flex;
align-items: center;
justify-content: space-around;
padding:0 4rem;
}

.control-coloum{
display: flex;
}

.about .row .content{

text-align: left;
}

.about .row .image img{

width: 50vw;
}

.about .row .content h3{

font-size: 3rem;
color: var(--color);

34
}

.about .row .content p{

font-size: 1.5rem;
color: #333;
padding:1rem 0;
}

.about::before, .about::after{
content: '';
position: absolute;
z-index: -1;
opacity:.2;
border-radius: 50%;
}

.about::before{
height:50rem;
width:50rem;
background:#ccc;
bottom:-10rem; left:-10rem;
}

.about::after{
height:60rem;
width:60rem;
background:var(--color);
top:-10rem; right:-10rem;
}

.article{
width: 100vw;

35
 text-align: center;
}

.contact{
min-height: 100vh;
width: 100vw;
text-align: center;
}

.contact .submit-btn {
cursor: pointer;
width: 150px !important;
margin-left: 18px !important;
}

.article .row .image img{

width:50vw;
height:55vh;
}

.Regis {
min-height: 100vh;
width: 100%;
text-align: center;
position: relative;
overflow: hidden;
}

.Regis .row{
margin:2rem 0;
padding:0 2rem;

36
 display: flex;
align-items: center;
justify-content: center;
}

Cc Buat file baru dengan nama dalam folder localhost/pkl/style.css dengan

nama “style.css” kemudian ketik script dibawah ini

Tabel 3.8 Kode “style.css”

.Regis{
background: aqua;
font-family: 'Poppins', sans-serif;
}

37
.Regis .container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Regis .container .form{
background: #fff;
padding: 30px 35px;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px
20px 0 rgba(0, 0, 0, 0.19);
}
.Regis .container .form form .form-control{
height: 40px;
font-size: 15px;
}
.Regis .container .form form .button{
background: #6665ee;
color: #fff;
font-size: 17px;
font-weight: 500;
transition: all 0.3s ease;
}
.Regis .container .form form .button:hover{
background: #5757d1;
}
.Regis .container .form form .link{
padding: 5px 0;
}.Regis .container .form form .link a{
color: #6665ee;
}

38
 .Regis .container .login-form form p{
font-size: 14px;
}
.Regis .container .row .alert{
font-size: 14px;
}

Cc Buat file baru dengan nama dalam folder

localhost/pkl/controllerUserData..php” dengan nama “controllerUserData..php”
kemudian ketik script dibawah ini

Tabel 3.9 Kode “controllerUserData..php”

<?php
session_start();
require "connection.php";
$email = "";

39
$name = "";
$errors = array();

//if user signup button

if(isset($_POST['signup'])){
$name = mysqli_real_escape_string($con,
$_POST['name']);
$email = mysqli_real_escape_string($con,
$_POST['email']);
$password = mysqli_real_escape_string($con,
$_POST['password']);
$cpassword = mysqli_real_escape_string($con,
$_POST['cpassword']);
if($password !== $cpassword){
$errors['password'] = "Confirm password not
matched!";
}
$email_check = "SELECT * FROM usertable
WHERE email = '$email'";
$res = mysqli_query($con, $email_check);
if(mysqli_num_rows($res) > 0){
$errors['email'] = "Email that you have entered is
already exist!";
}
if(count($errors) === 0){
$encpass = password_hash($password,
PASSWORD_BCRYPT);
$code = rand(999999, 111111);
$status = "notverified";
$insert_data = "INSERT INTO usertable (name,
email, password, code, status)
values('$name', '$email', '$encpass',

40
 '$code', '$status')";
$data_check = mysqli_query($con, $insert_data);
if($data_check){
$subject = "Email Verification Code";
$message = "Your verification code is $code";
$sender = "From: shahiprem7890@gmail.com";
if(mail($email, $subject, $message, $sender)){
$info = "We've sent a verification code to
your email - $email";
$_SESSION['info'] = $info;
$_SESSION['email'] = $email;
$_SESSION['password'] = $password;
header('location: user-otp.php');
exit();
}else{
$errors['otp-error'] = "SUCCES THANKS
YOU!";
}
}else{
$errors['db-error'] = "Failed while inserting data
into database!";
}
}

}
//if user click verification code submit button
if(isset($_POST['check'])){
$_SESSION['info'] = "";
$otp_code = mysqli_real_escape_string($con,
$_POST['otp']);
$check_code = "SELECT * FROM usertable
WHERE code = $otp_code";

41
 $code_res = mysqli_query($con, $check_code);
if(mysqli_num_rows($code_res) > 0){
$fetch_data = mysqli_fetch_assoc($code_res);
$fetch_code = $fetch_data['code'];
$email = $fetch_data['email'];
$code = 0;
$status = 'verified';
$update_otp = "UPDATE usertable SET code =
$code, status = '$status' WHERE code =
$fetch_code";
$update_res = mysqli_query($con,
$update_otp);
if($update_res){
$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
header('location: home.php');
exit();
}else{
$errors['otp-error'] = "Failed while updating
code!";
}
}else{
$errors['otp-error'] = "You've entered incorrect
code!";
}
}

//if user click login button

if(isset($_POST['login'])){
$email = mysqli_real_escape_string($con,
$_POST['email']);
$password = mysqli_real_escape_string($con,

42
 $_POST['password']);
$check_email = "SELECT * FROM usertable
WHERE email = '$email'";
$res = mysqli_query($con, $check_email);
if(mysqli_num_rows($res) > 0){
$fetch = mysqli_fetch_assoc($res);
$fetch_pass = $fetch['password'];
if(password_verify($password, $fetch_pass)){
$_SESSION['email'] = $email;
$_SESSION['password'] = $password;
$status = $fetch['status'];
if($status == 'verified'){
$_SESSION['email'] = $email;
header('location: home.php');
}else{
$info = "It's look like you haven't still
verify your email - $email";
$_SESSION['info'] = $info;
header('location: user-otp.php');
}
}else{
$errors['email'] = "Incorrect email or
password!";
}
}else{
$errors['email'] = "It's look like you're not yet a
member! Click on the bottom link to signup.";
}
}

//if user click continue button in forgot password

form

43
if(isset($_POST['check-email'])){
$email = mysqli_real_escape_string($con,
$_POST['email']);
$check_email = "SELECT * FROM usertable
WHERE email='$email'";
$run_sql = mysqli_query($con, $check_email);
if(mysqli_num_rows($run_sql) > 0){
$code = rand(999999, 111111);
$insert_code = "UPDATE usertable SET code =
$code WHERE email = '$email'";
$run_query = mysqli_query($con,
$insert_code);
if($run_query){
$subject = "Password Reset Code";
$message = "Your password reset code is
$code";
$sender = "From:
mhaekalmubarok09@gmail.com";
if(mail($email, $subject, $message, $sender))
{
$info = "We've sent a passwrod reset otp to
your email - $email";
$_SESSION['info'] = $info;
$_SESSION['email'] = $email;
header('location: reset-code.php');
exit();
}else{
$errors['otp-error'] = "Failed while sending
code!";
}
}else{
$errors['db-error'] = "Something went

44
 wrong!";
}
}else{
$errors['email'] = "This email address does not
exist!";
}
}

//if user click check reset otp button

if(isset($_POST['check-reset-otp'])){
$_SESSION['info'] = "";
$otp_code = mysqli_real_escape_string($con,
$_POST['otp']);
$check_code = "SELECT * FROM usertable
WHERE code = $otp_code";
$code_res = mysqli_query($con, $check_code);
if(mysqli_num_rows($code_res) > 0){
$fetch_data = mysqli_fetch_assoc($code_res);
$email = $fetch_data['email'];
$_SESSION['email'] = $email;
$info = "Please create a new password that you
don't use on any other site.";
$_SESSION['info'] = $info;
header('location: new-password.php');
exit();
}else{
$errors['otp-error'] = "You've entered incorrect
code!";
}
}

//if user click change password button

45
if(isset($_POST['change-password'])){
$_SESSION['info'] = "";
$password = mysqli_real_escape_string($con,
$_POST['password']);
$cpassword = mysqli_real_escape_string($con,
$_POST['cpassword']);
if($password !== $cpassword){
$errors['password'] = "Confirm password not
matched!";
}else{
$code = 0;
$email = $_SESSION['email']; //getting this
email using session
$encpass = password_hash($password,
PASSWORD_BCRYPT);
$update_pass = "UPDATE usertable SET code
= $code, password = '$encpass' WHERE email =
'$email'";
$run_query = mysqli_query($con,
$update_pass);
if($run_query){
$info = "Your password changed. Now you
can login with your new password.";
$_SESSION['info'] = $info;
header('Location: password-changed.php');
}else{
$errors['db-error'] = "Failed to change your
password!";
}
}
}

46
 //if login now button click
if(isset($_POST['login-now'])){
header('Location: register.php');
}
?>

Dd Buat file baru dengan nama dalam folder localhost/pkl/connection.php”

dengan nama “connection.php” kemudian ketik script dibawah ini

Tabel 4.0 Kode “connection.php”

<?php
$con = mysqli_connect('localhost', 'root', '', 'userform');
?>

47
ee . Buat file baru dengan nama dalam folder localhost/pkl/signup-
user.php ” dengan nama “signup-user.php ” kemudian ketik script dibawah
ini

Tabel 4.1 Kode “signup-user.php ”

<?php require_once "controllerUserData.php"; ?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

48
 <!-- Somehow I got an error, so I comment the title, just uncomment to
show -->
<!-- <title>Signup Form</title> -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.
css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 form">
<form action="signup-user.php" method="POST"
autocomplete="">
<h2 class="text-center">Signup Form</h2>
<p class="text-center">It's quick and easy.</p>
<?php
if(count($errors) == 1){
?>
<div class="alert alert-danger text-center">
<?php
foreach($errors as $showerror){
echo $showerror;
}
?>
</div>
<?php
}elseif(count($errors) > 1){
?>
<div class="alert alert-danger">
<?php
foreach($errors as $showerror){

49
 ?>
<li><?php echo $showerror; ?></li>
<?php
}
?>
</div>
<?php
}
?>
<div class="form-group">
<input class="form-control" type="text" name="name"
placeholder="Full Name" required value="<?php echo $name ?>">
</div>
<div class="form-group">
<input class="form-control" type="email" name="email"
placeholder="Email Address" required value="<?php echo $email ?>">
</div>
<div class="form-group">
<input class="form-control" type="password"
name="password" placeholder="Password" required>
</div>
<div class="form-group">
<input class="form-control" type="password"
name="cpassword" placeholder="Confirm password" required>
</div>
<div class="form-group">
<input class="form-control button" type="submit"
name="signup" value="Signup">
</div>
<div class="link login-link text-center">Already a member?
<!-- <a href="register.php">Login here</a> -->
</div>

50
 </form>
</div>
</div>
</div>
</body>
</html>

ff. Buat file baru dengan nama dalam folder localhost/pkl/user-otp.php ”

dengan nama “user-otp.php ” kemudian ketik script dibawah ini

Tabel 4.1 Kode “user-otp.php” 

<?php require_once "controllerUserData.php"; ?>

<?php
$email = $_SESSION['email'];
if($email == false){
header('Location: register.php');
}
?>

51
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to
show -->
<!-- <title>Code Verification</title> -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.
css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 form">
<form action="user-otp.php" method="POST"
autocomplete="off">
<h2 class="text-center">Code Verification</h2>
<?php
if(isset($_SESSION['info'])){
?>
<div class="alert alert-success text-center">
<?php echo $_SESSION['info']; ?>
</div>
<?php
}
?>
<?php
if(count($errors) > 0){
?>
<div class="alert alert-danger text-center">

52
 <?php
foreach($errors as $showerror){
echo $showerror;
}
?>
</div>
<?php
}
?>
<div class="form-group">
<input class="form-control" type="number" name="otp"
placeholder="Enter verification code" required>
</div>
<div class="form-group">
<input class="form-control button" type="submit"
name="check" value="Submit">
</div>
</form>
</div>
</div>
</div>
</body>
</html>

53
gg. Buat file baru dengan nama dalam folder localhost/pkl/ home.php ”
dengan nama “home.php ” kemudian ketik script dibawah ini

Tabel 4.2 Kode “home.php ” 

@import url('https://fonts.googleapis.com/css?
family=Poppins:400,500,600,700&display=swap');
nav{
padding-left: 100px!important;
padding-right: 100px!important;
background: #6665ee;
font-family: 'Poppins', sans-serif;
}
nav a.navbar-brand{

54
 color: #fff;
font-size: 30px!important;
font-weight: 500;
}
button a{
color: #6665ee;
font-weight: 500;
}
button a:hover{
text-decoration: none;
}
h2{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
text-align: center;
transform: translate(-50%, -50%);
font-size: 50px;
font-weight: 600;
}
</style>
</head>
<body>
<nav class="navbar">
<a class="navbar-brand" href="#">Brand name</a>
<button type="button" class="btn btn-light">
<!-- <a href="logout-user.php">Logout</a> -->
</button>
</nav>
<h2>Welcome <?php echo $fetch_info['name'] ?></h2>
</body>

55
</html>

hh. Buat file baru dengan nama dalam folder localhost/pkl/ forgot-
password.php” dengan nama “forgot-password.php” kemudian ketik
script dibawah ini

Tabel 4.2 Kode “forgot-password.php”

<?php require_once "controllerUserData.php"; ?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Somehow I got an error, so I comment the title,
just uncomment to show -->
<!-- <title>Forgot Password</title> -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap

56
 /4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 form">
<form action="forgot-password.php"
method="POST" autocomplete="">
<h2 class="text-center">Forgot
Password</h2>
<p class="text-center">Enter your email
address</p>
<?php
if(count($errors) > 0){
?>
<div class="alert alert-danger text-
center">
<?php
foreach($errors as $error){
echo $error;
}
?>
</div>
<?php
}
?>
<div class="form-group">
<input class="form-control"
type="email" name="email" placeholder="Enter
email address" required value="<?php echo $email
?>">

57
 </div>
<div class="form-group">
<input class="form-control button"
type="submit" name="check-email"
value="Continue">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
 

ii. Buat file baru dengan nama dalam folder localhost/pkl/ reset-code.php”
dengan nama “reset-code.php” kemudian ketik script dibawah ini

Tabel 4.3 Kode “reset-code.php”

<?php require_once "controllerUserData.php"; ?>

<?php
$email = $_SESSION['email'];
if($email == false){
header('Location: register.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Somehow I got an error, so I comment the title,

58
 just uncomment to show -->
<!-- <title>Code Verification</title> -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap
/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 form">
<form action="reset-code.php"
method="POST" autocomplete="off">
<h2 class="text-center">Code
Verification</h2>
<?php
if(isset($_SESSION['info'])){
?>
<div class="alert alert-success text-
center" style="padding: 0.4rem 0.4rem">
<?php echo $_SESSION['info']; ?>
</div>
<?php
}
?>
<?php
if(count($errors) > 0){
?>
<div class="alert alert-danger text-
center">
<?php
foreach($errors as $showerror){

59
 echo $showerror;
}
?>
</div>
<?php
}
?>
<div class="form-group">
<input class="form-control"
type="number" name="otp" placeholder="Enter
code" required>
</div>
<div class="form-group">
<input class="form-control button"
type="submit" name="check-reset-otp"
value="Submit">
</div>
</form>
</div>
</div>
</div>
</body>
</html>

60
jj. Buat file baru dengan nama dalam folder localhost/pkl/new-
password.php” dengan nama “new-password.php” kemudian ketik
script dibawah ini

Tabel 4.4 Kode “new-password.php”

<?php require_once "controllerUserData.php"; ?>

<?php
$email = $_SESSION['email'];
if($email == false){
header('Location: register.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Somehow I got an error, so I comment the title,

61
 just uncomment to show -->
<!-- S<title>Create a New Password</title> -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/
4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 form">
<form action="new-password.php"
method="POST" autocomplete="off">
<h2 class="text-center">New
Password</h2>
<?php
if(isset($_SESSION['info'])){
?>
<div class="alert alert-success text-
center">
<?php echo $_SESSION['info']; ?>
</div>
<?php
}
?>
<?php
if(count($errors) > 0){
?>
<div class="alert alert-danger text-
center">
<?php
foreach($errors as $showerror){

62
 echo $showerror;
}
?>
</div>
<?php
}
?>
<div class="form-group">
<input class="form-control"
type="password" name="password"
placeholder="Create new password" required>
</div>
<div class="form-group">
<input class="form-control"
type="password" name="cpassword"
placeholder="Confirm your password" required>
</div>
<div class="form-group">
<input class="form-control button"
type="submit" name="change-password"
value="Change">
</div>
</form>
</div>
</div>
</div>
</body>
</html>

63
kk. Buat file baru dengan nama dalam folder localhost/pkl/ password-
changed.php” dengan nama “password-changed.php” kemudian ketik
script dibawah ini

Tabel 4.4 Kode “password-changed.php”

<?php require_once "controllerUserData.php"; ?>

<?php
$email = $_SESSION['email'];
if($email == false){
header('Location: register.php');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Somehow I got an error, so I comment the title,

64
 just uncomment to show -->
<!-- S<title>Create a New Password</title> -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/
4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 form">
<form action="new-password.php"
method="POST" autocomplete="off">
<h2 class="text-center">New
Password</h2>
<?php
if(isset($_SESSION['info'])){
?>
<div class="alert alert-success text-
center">
<?php echo $_SESSION['info']; ?>
</div>
<?php
}
?>
<?php
if(count($errors) > 0){
?>
<div class="alert alert-danger text-
center">
<?php
foreach($errors as $showerror){

65
 echo $showerror;
}
?>
</div>
<?php
}
?>
<div class="form-group">
<input class="form-control"
type="password" name="password"
placeholder="Create new password" required>
</div>
<div class="form-group">
<input class="form-control"
type="password" name="cpassword"
placeholder="Confirm your password" required>
</div>
<div class="form-group">
<input class="form-control button"
type="submit" name="change-password"
value="Change">
</div>
</form>
</div>
</div>
</div>
</body>
</html>

66
 F. Hasil Kerja
1. Tampilan awal sebagai home
A. Tampilan Sebagai Home dari aplikasi company profile kelompok 13.

Gambar 3.18 Tampilan awal sebagai (home) aplikasi company profile kelompok 13.

B. Tampilan Sebagai About dari aplikasi company profile kelompok

13.

67
Gambar 3.19 Tampilan sebagai (about) aplikasi company profile kelompok 13

C. Tampilan Sebagai Article dari aplikasi company profile kelompok

13.

Gambar 3.20 Tampilan sebagai (article) dari aplikasi company profile kelompok 13

68
Gambar 3.21 Tampilan sebagi (article) dari aplikasi company profile kelompok 13

D. Tampilan sebagai Registirions dari aplikasi company profile

kelompok 13

Gambar 3.22 Tampilan sebagai (Registrions) dari aplikasi company profile kelompok
13

E. Tampilan sebagai ( form) dalam ( Registrions) dari aplikasi company profile

kelompok 13

69
Gambar 3.23 Tampilan sebagai ( form) dalam ( Registrions) dari aplikasi company
profile kelompok 13

BAB IV
PENUTUP

A. Kesimpulan

Sistem kerja casual adalah sistem yang telah banyak digunakan oleh
perusahaan yang fokus dalam bidang teknologi, sistem kerja casual
merupakan system yang mempermudah para programmer untuk
melakukan pekerjaannya dimanapun dan cukup memberikan laporan
harian mereka mengenai progress yang telah tercapai.

70
 Aplikasi company profile kelompok kelompok 13 adalah berfungsi
perkenalan kelompok ke 13 telah membuat alat soil moistucre dan
handtaizer dengan anda website ini user bisa membaca apa itu soil
moistucre dan handtaizer dan menambah ilmu untuk user
dan user bisa melalukan login atau daftar di dalam website tersebut
dengan menu registrions dalam wbesite tersebut mepermudahkan user
untuk login dalam website tersebut

B. Saran
Saran yang dapat disampaikan agar penyelesaian pembuatan aplikasi
company profile kelompol 13 ini menjadi maksimal adalah
1. Teliti dalam mengetik script, karena apabila terjadi kesalahan
saat mengetik script dapat membuat aplikasi menjadi error.
2. Menggunakan aplikasi sesuai dengan yang disarankan, agar
sesuai dengan setiap langkah yang dijelaskan.
3. Fokus pada saat pengerjaan aplikasi, agar dapat meminimalisir
terjadinya kesalahan dalam mengetik script.
4. Mengantur waktu lebih baik lagi untuk melalukan pembuatan
program aplikasi untuk lebih baik lagi kedepan dalam program
tersebut.

71
11

DAFTAR PUSTAKA

Adi, Arista Prasetyo. 2020. Panduan Kilat Pemrograman PHP,

Langsung Bisa. Jakarta: PT Elex Media Komputindo

Malas Ngoding. 2016. Cara Membuat Form Validasi dengan PHP.

Internet : https://www.malasngoding.com/cara-membuat-form-
validasi-dengan-php/. Diakses pada tanggal 01 Januari 2021
pukul 12.35 WIB

Web Programming UNPAS. 2017. Belajar PHP untuk PEMULA |

17. LOGIN. Internet: https://www.youtube.com/watch?
v=2pAApp655es&list=PLFIM0718LjIUqXfmEIBE3-
uzERZPh3vp6&index=17. Diakses pada tanggal 28 Februari
2021 pukul 18.55 WIB

Mari Belajar Coding. 2019. Menampilkan Dropdown Select

Option Dari Database MySQL PHP. Internet :
https://www.maribelajarcoding.com/2019/05/menampilkan-
dropdown-select-option-dari.html. Diakses pada tanggal 1 maret
2021 pukul 09.02 WIB
11

BIODATA PENULIS

PAS

FOTO

3X4

(WARNA)

NAMA : M Haekal Mubarok

TEMPAT TANGGAL LAHIR : Jakarta, 09 Juli 2004

ALAMAT : Pup Sektor V Babelan Bekasi utara

EMAIL : mhaekalmubarok09@gmail.com