PEMBUATAN WEBSITE

mymomiji.epizy.com

Disusun untuk memenuhi tugas Ujian Akhir Semseter

Mata Kuliah Pemrograman Web II

Dosen Pengampu : Abu Walad, S.T., M.T.

Disusun Oleh :

Alfany Nurulita (18403188)

IRM-R44/18

INFORMATIKA REKAM MEDIS

POLITEKNIK PIKSI GANESHA

BANDUNG

2021
 KATA PENGANTAR
Puji syukur kehadirat Allah SWT yang telah memberikan rahmat dan hidayah-Nya
sehingga saya dapat menyelesaikan tugas makalah yang berjudul “Pembuatan Website” ini
tepat pada waktunya.

Adapun tujuan dari penulisan makalah ini adalah untuk memenuhi tugas pada mata
kuliah Pemrograman Web II. Selain itu, makalah ini juga bertujuan untuk menambah wawasan
tentang pembuatan website, penggunaan web hosting dan domain name dalam suatu
pemrograman bagi para pembaca dan juga bagi penulis.

Saya mengucapkan terima kasih kepada Bapak Abu Walad, S.T., M.T. selaku Dosen
Mata Kuliah Pemrograman Web II yang telah memberikan tugas ini sehingga dapat
menambah pengetahuan dan wawasan saya terkait materi tersebut. Saya juga mengucapkan
terima kasih kepada semua pihak yang telah membantu dan membagi sebagian pengetahuannya
sehingga saya dapat menyelesaikan makalah ini. Saya menyadari bahwa penyusunan makalah ini
banyak kesalahan dan kekurangan, oleh karena itu kritik yang membangun dari semua pihak
sangat saya harapkan demi kesempurnaan makalah ini.

Bandung, 15 Januari 2021

Penulis
 A. Pengertian Web Hosting

Web Hosting adalah layanan jasa atau penyewaan tempat untuk menyimpan file atau
bentuk script yang berada Internet dan memungkinkan untuk perorangan atau pun
organisasi guna menampilkan layanan jasa atau produk di web atau bahkan situs Internet
seperti web portal, web pribadi dan banyak lagi.

Web Hosting atau dapat juga diartikan sebagai tempat penyimpanan data berupa file
dengan ukuran megabytes (MB) hingga ukuran besar yaitu terabytes (TB) yang memiliki
koneksi ke internet sehingga data dalam web hosting tersebut dapat di request (di minta)
atau di akses oleh pengguna internet dari semua penjuru atau global. Hal inilah yang
menyebabkan website dapat di akses secara bersamaan dalam dekade satu waktu.

Pada dasarnya server web hosting menggunakan sebuah komputer biasa yang sudah
kita kenal, namun komputer untuk web hosting menggunakan beberapa komponen dengan
jumlah daya tamung luar biasa dan program dasar sebuah server hosting harus mampu
untuk online dalam waktu 24 jam setiap hari dan tanpa harus dimatikan atau di refresh
dalam jangka waktu cukup lebih lama daripada komputer biasa yang sudah kita kenal.

Sekarang ini banyak sekali layanan web hosting yang memungkinan untuk dipilih
dari berbagai tempat. Misalnya di Indonesia, Singapore, Amerika dan banyak lagi.
Pemilihan tempat ini sangat terpengaruh pada kecepatan akses ketika seseorang ingin
mengunjungi website tersebut. Untuk menentukan serta menangani pengguna sebaiknya
dipilih web hosting yang terdekat. ini salah satu pilihan dan salah satu trik tentang seo.

Web Hosting merupakan penggabungan dari kata web dan hosting, dan apabila
diartikan satu persatu maka web merupakan sebuah halaman situs yang bisa diakses dengan
menggunakan sebuah aplikasi browser, hosting merupakan sebuah tempat yang digunakan
untuk menyimpan halaman - halaman web tersebut, dimana dalam penyimpanannya,
halaman - halaman web akan diletakan dalam sebuah komputer web server yang terhubung
ke internet dalam bentuk file - file data. server - server yang digunakan untuk menyimpan
data web biasanya dikelola oleh sebuah perusahaan yang khusus menangani penyewaan
web hosting. dan web hosting sendiri merupakan salah satu bentuk penerapan dari bisnis
online yang sudah kita bahas sebelumnya . Perusahaan penyedia layanan webhosting
biasanya disebut dengan webhost.

Di Indonesia sendiri telah banyak sekali penyedia - penyedia layanan webhosting

dengan berbagai keunggulan dan penawaran fitur - fitur yang berbeda antara satu dengan
yang lain, dan yang membedakan antara perusahaan yang satu dengan yang lain adalah dari
segi layanan seperti besarnya kapasitas ruang penyimpanan, konektifitas serta data transfer
dalam penawaran paket - paket hosting yang mereka sediakan.

B. Pengertian Domain Name

Nama domain (domain name) adalah nama unik yang diberikan untuk
mengidentifikasi nama server komputer seperti web server atau email server di jaringan
komputer ataupun internet. Nama domain berfungsi untuk mempermudah pengguna di
internet pada saat melakukan akses ke server, selain itu juga dipakai untuk mengingat nama
server yang dikunjungi tanpa harus mengenal deretan angka yang rumit yang dikenal
sebagai alamat IP. Nama domain ini juga dikenal sebagai sebuah kesatuan dari sebuah situs
web seperti contohnya "wikipedia.org". Nama domain kadang-kadang disebut pula dengan
istilah URL, atau alamat website.

Pada awalnya nama domain hanya dapat dituliskan dengan ke-26 abjad Latin,
namun saat ini telah dimungkinkan untuk menggunakan abjad asing
dengan Internasionalisasi nama domain. Sistem nama domain (DNS) adalah aturan yang
dipakai dalam sistem penamaan dari nama domain ini.

Domain Name System (DNS) adalah sebuah aplikasi service di internet yang
menerjemahkan sebuah domain name ke IP address dan salah satu jenis system yang
melayani permintaan pemetaan IP address ke FQPN (Fany Qualified Domain Name) dan
dari FQDN ke IP address. DNS biasanya digunakan pada aplikasi yang berhubungan ke
internet seperti Web Browser atau e-mail, Dimana DNS membantu memetakan host name
sebuah computer ke IP address. Selain digunakan di internet DNS juga dapat di
implementasikan ke private network atau internet. Implementasi Disconected
 C. Pembuatan Website

Pembuatan Rancangan Website

1. Siapkan template dan file codeigniter 3. Download template gratis pada Bootstrap.com. Saya
menggunakan Business Casual template. Kemudian gunakan pula CodeIgniter 3 sebagai
framework.

2. Ubah nama file Codeigniter 3 menjadi “Percobaan”, kemudian simpan pada folder www
yang terletak di wamp/www.

3. Ubah configurasi file config.php pada Percobaan/application/config. Ubah menjadi seperti

seperti configurasi berikut.
$config['base_url'] = 'http://localhost/Percobaan/index.php';
$config['index_page'] = '';

4. Buka file template yang telah di download, kemudian salin semua isinya lalu pindahkan pada
folder baru dengan nama “assets” pada www/Percobaan. Setelah tersalin, hapus about.html,
index.html, product.htm dan store.html.
5. Kembali ke folder template, kemudian buka file index.html dengan notepad ataupun
Dreamweaver CS6. Setelah itu salin semua kodingnya dan buat file baru dengan nama
v_home.php pada folder Percobaan/application/view. Setelah dipindahkan hapus bagian
header dan footer. Sehingga menyisakan bagian body dan menghasilkan koding berikut.

<!DOCTYPE html>
<html lang="en">

<body>
<section class="page-section clearfix">
<div class="container">
<div class="intro">
<img class="intro-img img-fluid mb-3 mb-lg-0 rounded"
src="http://localhost/Percobaan/assets/img/intro.jpg" alt="">
<div class="intro-text left-0 text-center bg-faded p-5 rounded">
<h2 class="section-heading mb-4">
<span class="section-heading-upper">Fresh Coffee</span>
<span class="section-heading-lower">Worth Drinking</span>
</h2>
<p class="mb-3">Every cup of our quality artisan coffee starts with locally sourced,
hand picked ingredients. Once you try it, our coffee will be a blissful addition to your
everyday morning routine - we guarantee it!
</p>
<div class="intro-button mx-auto">
<a class="btn btn-primary btn-xl"
href='<?php echo base_url() ?>web/menu'>Today's Menu!</a>
</div>
 </div>
</div>
</div>
</section>

<section class="page-section cta">

<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<div class="cta-inner text-center rounded">
<h2 class="section-heading mb-4">
<span class="section-heading-upper">Our Promise</span>
<span class="section-heading-lower">To You</span>
</h2>
<p class="mb-0">When you walk into our shop to start your day, we are
dedicated to providing you with friendly service, a welcoming atmosphere, and above all
else, excellent products made with the highest quality ingredients. If you are not satisfied,
please let us know and we will do whatever we can to make things right!</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

6. Lakukan hal yang sama seperti langkah diatas untuk membuat file v_header.php, dengan
hanya mengambil bagian header saja, sehingga menghasilkan koding berikut. Simpan pada
foler Percobaan/application/view.

<!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>Momiji Cafe - Coffe for Everyone</title>

<!-- Bootstrap core CSS -->

<link href="http://localhost/Percobaan/assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">

<!-- Custom fonts for this template -->

<link
href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,
400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i"
rel="stylesheet">

<!-- Custom styles for this template -->

<link href="http://localhost/Percobaan/assets/css/business-casual.min.css"
rel="stylesheet">

</head>

<body>

<h1 class="site-heading text-center text-white d-none d-lg-block">

<span class="site-heading-upper text-primary mb-3">Coffe For Everyone</span>
<span class="site-heading-lower">MOMIJI CAFE</span>
</h1>

<!-- Navigation -->

<nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
<div class="container">
<a class="navbar-brand text-uppercase text-expanded font-weight-bold d-lg-none"
href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
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 mx-auto">
<li class="nav-item active px-lg-4">
<a class="nav-link text-uppercase text-expanded"
 href='<?php echo base_url() ?>web/index'>Home</a></li>

<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded"
href='<?php echo base_url() ?>web/about'>About</a></li>

</li>
<li class="nav-item px-lg-4">
<li><a class="nav-link text-uppercase text-expanded"
href='<?php echo base_url() ?>web/products'>Products</a></li>

</li>
<li class="nav-item px-lg-4">
<li><a class="nav-link text-uppercase text-expanded"
href='<?php echo base_url() ?>web/store'>Store</a></li>

</li>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>

7. Lakukan hal yang sama seperti perintah no.5 diatas untuk membuat file v_footer.php dengan
hanya mengambil bagian footernya saja kemudian simpan pada folder
Percobaan/application/view. Sehingga menghasilkan koding berikut.
<html>
<body>
<footer class="footer text-faded text-center py-5">
<div class="container">
<p class="m-0 small">Copyright &copy; Your Website 2020</p>
</div>
</footer>

<!-- Bootstrap core JavaScript -->

 <script src="http://localhost/Percobaan/assets/vendor/jquery/jquery.min.js"></script>
<script
src="http://localhost/Percobaan/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></scr
ipt>

</body>

</html>

8. Selanjutnya buat file v_about.php dengan menyalin koding dari template about.html pada
template. Seperti perintah diatas, hilangkan bagian header dan footer sehingga menyisakan
body saja. Simpan pada folder Percobaan/application/view Maka akan seperti koding
berikut.

<!DOCTYPE html>
<html lang="en">

<body>
<section class="page-section about-heading">
<div class="container">
<img class="img-fluid rounded about-heading-img mb-3 mb-lg-0"
src="http://localhost/Percobaan/assets/img/about.jpg" alt="">
<div class="about-heading-content">
<div class="row">
<div class="col-xl-9 col-lg-10 mx-auto">
<div class="bg-faded rounded p-5">
<h2 class="section-heading mb-4">
<span class="section-heading-upper">Strong Coffee, Strong Roots</span>
<span class="section-heading-lower">About Our Cafe</span>
</h2>
<p>Founded in 1987 by the Hernandez brothers, our establishment has been
serving up rich coffee sourced from artisan farmers in various regions of South and
Central America. We are dedicated to travelling the world, finding the best coffee, and
bringing back to you here in our cafe.</p>
<p class="mb-0">We guarantee that you will fall in <em>lust</em> with our
decadent blends the moment you walk inside until you finish your last sip. Join us for
your daily routine, an outing with friends, or simply just to enjoy some alone time.</p>
</div>
</div>
</div>
 </div>
</div>
</section>
</body>
</html>

9. Buat file v_products.php seperti langkah diatas. Simpan pada folder

Percobaan/application/view. Sehingga nampak seperti koding berikut.

<!DOCTYPE html>
<html lang="en">

<section class="page-section">
<div class="container">
<div class="product-item">
<div class="product-item-title d-flex">
<div class="bg-faded p-5 d-flex ml-auto rounded">
<h2 class="section-heading mb-0">
<span class="section-heading-upper">Blended to Perfection</span>
<span class="section-heading-lower">Coffees &amp; Teas</span>
</h2>
</div>
</div>
<img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0"
src="http://localhost/Percobaan/assets/img/products-01.jpg" alt="">
<div class="product-item-description d-flex mr-auto">
<div class="bg-faded p-5 rounded">
<p class="mb-0">We take pride in our work, and it shows. Every time you order
a beverage from us, we guarantee that it will be an experience worth having. Whether it's
our world famous Venezuelan Cappuccino, a refreshing iced herbal tea, or something as
simple as a cup of speciality sourced black coffee, you will be coming back for
more.</p>
</div>
</div>
</div>
</div>
</section>

<section class="page-section">
<div class="container">
 <div class="product-item">
<div class="product-item-title d-flex">
<div class="bg-faded p-5 d-flex mr-auto rounded">
<h2 class="section-heading mb-0">
<span class="section-heading-upper">Delicious Treats, Good Eats</span>
<span class="section-heading-lower">Bakery &amp; Kitchen</span>
</h2>
</div>
</div>
<img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0"
src="http://localhost/Percobaan/assets/img/products-02.jpg" alt="">
<div class="product-item-description d-flex ml-auto">
<div class="bg-faded p-5 rounded">
<p class="mb-0">Our seasonal menu features delicious snacks, baked goods, and
even full meals perfect for breakfast or lunchtime. We source our ingredients from local,
oragnic farms whenever possible, alongside premium vendors for specialty goods.</p>
</div>
</div>
</div>
</div>
</section>

<section class="page-section">
<div class="container">
<div class="product-item">
<div class="product-item-title d-flex">
<div class="bg-faded p-5 d-flex ml-auto rounded">
<h2 class="section-heading mb-0">
<span class="section-heading-upper">From Around the World</span>
<span class="section-heading-lower">Bulk Speciality Blends</span>
</h2>
</div>
</div>
<img class="product-item-img mx-auto d-flex rounded img-fluid mb-3 mb-lg-0"
src="http://localhost/Percobaan/assets/img/products-03.jpg" alt="">
<div class="product-item-description d-flex mr-auto">
<div class="bg-faded p-5 rounded">
<p class="mb-0">Travelling the world for the very best quality coffee is
something take pride in. When you visit us, you'll always find new blends from around
 the world, mainly from regions in Central and South America. We sell our blends in
smaller to large bulk quantities. Please visit us in person for more details.</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

10. Buat file v_store.php seperti langkah diatas, kemudian simpan pada folder
Percobaan/application/view. Maka hasil koding akan seperti berikut.

<!DOCTYPE html>
<html lang="en">

<body>
<section class="page-section cta">
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<div class="cta-inner text-center rounded">
<h2 class="section-heading mb-5">
<span class="section-heading-upper">Come On In</span>
<span class="section-heading-lower">We're Open</span>
</h2>
<ul class="list-unstyled list-hours mb-5 text-left mx-auto">
<li class="list-unstyled-item list-hours-item d-flex">
Sunday
<span class="ml-auto">Closed</span>
</li>
<li class="list-unstyled-item list-hours-item d-flex">
Monday
<span class="ml-auto">7:00 AM to 8:00 PM</span>
</li>
<li class="list-unstyled-item list-hours-item d-flex">
Tuesday
<span class="ml-auto">7:00 AM to 8:00 PM</span>
</li>
<li class="list-unstyled-item list-hours-item d-flex">
 Wednesday
<span class="ml-auto">7:00 AM to 8:00 PM</span>
</li>
<li class="list-unstyled-item list-hours-item d-flex">
Thursday
<span class="ml-auto">7:00 AM to 8:00 PM</span>
</li>
<li class="list-unstyled-item list-hours-item d-flex">
Friday
<span class="ml-auto">7:00 AM to 8:00 PM</span>
</li>
<li class="list-unstyled-item list-hours-item d-flex">
Saturday
<span class="ml-auto">9:00 AM to 5:00 PM</span>
</li>
</ul>
<p class="address mb-5">
<em>
<strong>1116 Orchard Street</strong>
<br>
Golden Valley, Minnesota
</em>
</p>
<p class="mb-0">
<small>
<em>Call Anytime</em>
</small>
<br>
(317) 585-8468
</p>
</div>
</div>
</div>
</div>
</section>

<section class="page-section about-heading">

<div class="container">
<img class="img-fluid rounded about-heading-img mb-3 mb-lg-0"
src="http://localhost/Percobaan/assets/img/about.jpg" alt="">
 <div class="about-heading-content">
<div class="row">
<div class="col-xl-9 col-lg-10 mx-auto">
<div class="bg-faded rounded p-5">
<h2 class="section-heading mb-4">
<span class="section-heading-upper">Strong Coffee, Strong Roots</span>
<span class="section-heading-lower">About Our Cafe</span>
</h2>
<p>Founded in 1987 by the Hernandez brothers, our establishment has been
serving up rich coffee sourced from artisan farmers in various regions of South and
Central America. We are dedicated to travelling the world, finding the best coffee, and
bringing back to you here in our cafe.</p>
<p class="mb-0">We guarantee that you will fall in
<em>lust</em>
with our decadent blends the moment you walk inside until you finish your
last sip. Join us for your daily routine, an outing with friends, or simply just to enjoy
some alone time.</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

11. Selanjutnya nyalakan wamp server menjadi online, dan buat database dengan nama kopi
pada phpmyadmin. Buat dua table, table pertama dengan nama barang, kemudian table
kedua dengan nama admin. Buat seperti berikut
 Input kan pada table admin dengan isian berikut :

Id :123

Username : admin

Password: 21232f297a57a5a743894a0e4a801fc3

Password menggunakan md5, sehingga input an akan seperti diatas, tapi saat login sebenarnya
itu adalah admin.

12. Untuk membuat form login, langkah selanjutnya adalah membuat v_admin.php. Simpan
pada folder Percobaan/application/view. Masukkan koding berikut.

<!DOCTYPE html>
<html>
<head>
<title>Form Login | www.ngulikode.com</title>
</head>
<body>
<h1>Login berhasil !</h1>
<h2>Hai, <?php echo $this->session->userdata("nama"); ?></h2>
<a href="<?php echo base_url(); ?>login/logout">Logout</a>
</body>
</html>

13. Langkah selanjutnya buat file v_login.php kemudian simpan pada folder
Percobaan/application/view. Masukkan koding berikut.
<!DOCTYPE html>
<html lang="id">

<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="">
<!-- Bootstrap core CSS -->
<link href="http://localhost/Percobaan/assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<!-- Custom fonts for this template -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,
400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i"
rel="stylesheet">

<!-- Custom styles for this template -->

<link href="http://localhost/Percobaan/assets/css/business-casual.min.css"
rel="stylesheet">
<title>Form Login</title>

<link href="http://localhost/Percobaan/assets/css/bootstrap.css" rel="stylesheet">

<link href="http://localhost/Percobaan/assets/css/jquery.dataTables.min.css"
rel="stylesheet">
</head>

<body>
<h1 class="site-heading text-center text-white d-none d-lg-block">
<span class="site-heading-upper text-primary mb-3">Form Login </span>
</h1>
</head>
<body>
<form action="login/aksi_login" method="post">
<table align='center'>
<tr>
 <td><center><span class="site-heading-upper text-primary mb-
3">USERNAME</span></center></td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td><center><span class="site-heading-upper text-primary mb-
3">PASSWORD</span></center></td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td>
<td><center><span class="site-heading-upper text-primary mb-3"><input
type="submit" value="Login"></td></span></center>
</tr>
</table>
</form>
</body>
</html>

14. Buat file m_login.php kemudian simpan pada folder Percobaan/application/models.

Masukkan koding berikut.

<!DOCTYPE html>
<html lang="id">

<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="">
<!-- Bootstrap core CSS -->
<link href="http://localhost/Percobaan/assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<!-- Custom fonts for this template -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,
400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i"
rel="stylesheet">
 <!-- Custom styles for this template -->
<link href="http://localhost/Percobaan/assets/css/business-casual.min.css"
rel="stylesheet">
<title>Form Login</title>
<link href="http://localhost/Percobaan/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://localhost/Percobaan/assets/css/jquery.dataTables.min.css"
rel="stylesheet">
</head>

<body>
<h1 class="site-heading text-center text-white d-none d-lg-block">
<span class="site-heading-upper text-primary mb-3">Form Login </span>
</h1>
</head>
<body>
<form action="login/aksi_login" method="post">
<table align='center'>
<tr>
<td><center><span class="site-heading-upper text-primary mb-
3">USERNAME</span></center></td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td><center><span class="site-heading-upper text-primary mb-
3">PASSWORD</span></center></td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td>
<td><center><span class="site-heading-upper text-primary mb-3"><input
type="submit" value="Login"></td></span></center>
</tr>
</table>
</form>
</body>
</html>

15. Buat file login.php kemudian simpan pada folder Percobaan/application/controllers.

Masukkan koding berikut.
<?php
class Login extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->model('m_login');
}

function index(){
$this->load->view('v_login');
}

function aksi_login(){
$username = $this->input->post('username');
$password = $this->input->post('password');
$where = array(
'username' => $username,
'password' => md5($password)
);
$cek = $this->m_login->cek_login("admin",$where)->num_rows();
if($cek > 0){

$data_session = array(
'nama' => $username,
'status' => "login"
);

$this->session->set_userdata($data_session);
redirect(base_url("web/barang"));
}else{
echo "Username dan password salah !";
}
}

function logout(){
$this->session->sess_destroy();
redirect(base_url('web'));
}
}
16. Buat file admin.php kemudian simpan pada folder Percobaan/application/controllers.
Masukkan koding berikut.

<?php
class Admin extends CI_Controller{
function __construct(){
parent::__construct();

if($this->session->userdata('status') != "login"){
redirect(base_url("login"));
}
}

function index(){
$this->load->view('v_admin');
}
}
?>

17. Langkah selanjutnya untuk membuat list barang sehingga dapat diinput, delete, maupun edit.
Buat file v_barang.php kemudian simpan pada folder Percobaan/application/view.
Masukkan koding berikut.

<!DOCTYPE html>
<html lang="id">

<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="">
<!-- Bootstrap core CSS -->
<link href="http://localhost/Percobaan/assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<!-- Custom fonts for this template -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,
400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i"
rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://localhost/Percobaan/assets/css/business-casual.min.css"
rel="stylesheet">
<title>Data Barang</title>
<link href="http://localhost/Percobaan/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://localhost/Percobaan/assets/css/jquery.dataTables.min.css"
rel="stylesheet">
</head>

<body>
<h1 class="site-heading text-center text-white d-none d-lg-block">
<span class="site-heading-upper text-primary mb-3">Coffee For Everyone</span>
<span class="site-heading-lower">MOMIJI CAFE</span>
</h1>
<div class="container site-heading text-center text-white d-none d-lg-block">
<h1>Today's <small>Menu! </small></h1>
<table class="table table-bordered table-striped" id="mydata">
<thead>
<tr>
<td><center><span class="site-heading-upper text-primary mb-3">Code
Product</center></span></td>

<td><center><span class="site-heading-upper text-primary mb-

3">Product</span></center></td>

<td><center><span class="site-heading-upper text-primary mb-

3">Harga</span></center></td>

</tr>
</thead>
<tbody>
<?php
foreach ($barang as $b){
echo"<tr>
<td>$b->kode_barang</td>
<td>$b->nama_barang</td>
<td>$b->harga</td>
<td>".anchor('web/edit/'.$b->kode_barang,'EDIT')."</td>
 <td>".anchor('web/delete/'.$b->kode_barang,'DELETE
')."</td></tr>";
}
?>
</tbody>
</table>
<hr>
<div class="intro-button mx-auto">
<a class="btn btn-primary btn-xl"
href='<?php echo base_url() ?>web/input'>INPUT</a>
</div>
<br><hr><br>
<div class="intro-text left-0 text-center bg-faded p-5 rounded">
<div class="intro-button mx-auto">
<a class="btn btn-primary btn-xl"
<a href="<?php echo base_url(); ?>login/logout">Logout</a>
</div>
</div>

<script src="http://localhost/Percobaan/assets/js/jquery-2.2.4.min.js" </script>

<script src="http://localhost/Percobaan/assets/js/bootstrap.js" </script>
<script src="http://localhost/Percobaan/assets/js/jquery.dataTables.min.js" </script>
<script src='<?php echo base_url().'assets/js/moment.js'?>'> </script>
<script>

$(document).ready(function(){
$('#mydata').DataTable();
});
</script>
</body>
</html>

18. Selanjutnya buat file v_menu.php kemudian simpan pada folder

Percobaan/application/view. Masukkan koding berikut.

<!DOCTYPE html>
<html lang="id">

<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="">
<!-- Bootstrap core CSS -->
<link href="http://localhost/Percobaan/assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<!-- Custom fonts for this template -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,
400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i"
rel="stylesheet">

<!-- Custom styles for this template -->

<link href="http://localhost/Percobaan/assets/css/business-casual.min.css"
rel="stylesheet">
<title>Data Barang</title>
<link href="http://localhost/Percobaan/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://localhost/Percobaan/assets/css/jquery.dataTables.min.css"
rel="stylesheet">
</head>

<body>
<h1 class="site-heading text-center text-white d-none d-lg-block">
<span class="site-heading-upper text-primary mb-3">Coffee For Everyone</span>
<span class="site-heading-lower">MOMIJI CAFE</span>
</h1>
<div class="container site-heading text-center text-white d-none d-lg-block">
<h1>Today's <small>Menu! </small></h1>
<table class="table table-bordered table-striped" id="mydata">
<thead>
<tr>
<td><center><span class="site-heading-upper text-primary mb-3">Code
Product</center></span></td>

<td><center><span class="site-heading-upper text-primary mb-

3">Product</span></center></td>
 <td><center><span class="site-heading-upper text-primary mb-
3">Harga</span></center></td>

</tr>
</thead>
<tbody>
<?php
foreach ($barang as $b){
echo"<tr>
<td>$b->kode_barang</td>
<td>$b->nama_barang</td>
<td>$b->harga</td>
</tr>";
}
?>
</tbody>
</table>
<hr>

<div class="intro-button mx-auto">

<a class="btn btn-primary btn-xl"
href='<?php echo base_url() ?>login'>Login</a>
</div>
</div>
<section class="page-section clearfix">
<div class="container">
<div class="intro">
<img class="intro-img img-fluid mb-3 mb-lg-0 rounded"
src="http://localhost/Percobaan/assets/img/barang.jpg" alt="">
<div class="intro-text left-0 text-center bg-faded p-5 rounded">
<p class="mb-3">The list above is the menu that we present today. Not all menus
that we have can always be served every day due to limited ingredients and also to
maintain quality. Each menu will always be updated according to availability.
</p>
<div class="intro-button mx-auto">
<a class="btn btn-primary btn-xl"
href='<?php echo base_url() ?>web/index'>Home</a>
</div>
</div>
</div>
 </div>
</section>
<script src="http://localhost/Percobaan/assets/js/jquery-2.2.4.min.js" </script>
<script src="http://localhost/Percobaan/assets/js/bootstrap.js" </script>
<script src="http://localhost/Percobaan/assets/js/jquery.dataTables.min.js" </script>
<script src='<?php echo base_url().'assets/js/moment.js'?>'> </script>
<script>

$(document).ready(function(){
$('#mydata').DataTable();
});
</script>
</body>
</html>

19. Berikutnya buat file v_edit.php kemudian simpan pada folder Percobaan/application/view.
Masukkan koding berikut.

<!DOCTYPE html>

<html lang="id">

<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="">

<!-- Bootstrap core CSS -->

<link href="http://localhost/Percobaan/assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">

<!-- Custom fonts for this template -->

<link
href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400
i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i"
rel="stylesheet">

<!-- Custom styles for this template -->

<link href="http://localhost/Percobaan/assets/css/business-casual.min.css" rel="stylesheet">

<link href="http://localhost/Percobaan/assets/css/bootstrap.css" rel="stylesheet">

<link href="http://localhost/Percobaan/assets/css/jquery.dataTables.min.css"
rel="stylesheet">

</head>

<body>

<h1 class="site-heading text-center text-white d-none d-lg-block">

<span class="site-heading-upper text-primary mb-3">Coffee For Everyone</span>

<span class="site-heading-lower">MOMIJI CAFE</span>

</h1>

<div class="container site-heading text-center text-white d-none d-lg-block">

<h1>Edit <small> List Menu! </small></h1>

<table class="table table-bordered table-striped" id="mydata">

<?php echo form_open('web/edit_simpan'); ?>

<?php echo form_hidden('id',$this->uri->segment(3)); ?>

<table>

<tr><td><center><span class="site-heading-upper text-primary mb-3">CODE

PRODUCT</center></span></td><td>

<span class="site-upper text-primary mb-3"><?php echo form_input('kode_barang',

$product['kode_barang'],array('placeholder'=>'kode barang')); ?></span></td></tr>

<tr><td><center><span class="site-heading-upper text-primary mb-3">NAME

PRODUCT</center></span></td><td>

<span class="site-upper text-primary mb-3"><?php echo form_input('nama_barang',

$product['nama_barang'],array('placeholder'=>'nama barang')); ?></span></td></tr>

 <tr><td><center><span class="site-heading-upper text-primary mb-3">PRICE
PRODUCT</center></span></td><td>

<span class="site-upper text-primary mb-3"><?php echo form_input('harga_barang',

$product['harga'],array('placeholder'=>'harga barang')); ?></span></td></tr>

<tr><td colspan="2">

<span class="site-heading-upper text-primary mb-3">

<?php echo form_submit('SUBMIT','SIMPAN DATA');?>

<?php echo anchor('web/barang','KEMBALI');?></span></td></tr>

</table>

<?php echo form_close();?>

20. Berikutnya buat file v_input.php kemudian simpan pada folder

Percobaan/application/view. Masukkan koding berikut.

<!DOCTYPE html>

<html lang="id">

<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="">

<!-- Bootstrap core CSS -->

<link href="http://localhost/Percobaan/assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">

<!-- Custom fonts for this template -->

 <link
href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400
i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i"
rel="stylesheet">

<!-- Custom styles for this template -->

<link href="http://localhost/Percobaan/assets/css/business-casual.min.css" rel="stylesheet">

<link href="http://localhost/Percobaan/assets/css/bootstrap.css" rel="stylesheet">

<link href="http://localhost/Percobaan/assets/css/jquery.dataTables.min.css"
rel="stylesheet">

</head>

<body>

<h1 class="site-heading text-center text-white d-none d-lg-block">

<span class="site-heading-upper text-primary mb-3">Coffee For Everyone</span>

<span class="site-heading-lower">MOMIJI CAFE</span>

</h1>

<div class="container site-heading text-center text-white d-none d-lg-block">

<h1>Input <small> List Menu! </small></h1>

<table class="table table-bordered table-striped" id="mydata">

<?php echo form_open('web/input_simpan'); ?>

<table>

<tr><td><center><span class="site-heading-upper text-primary mb-3">CODE

PRODUCT</span></center></td>

<td><span class="site-upper text-primary mb-3"><?php echo form_input('kode_barang',

'',array('placeholder'=>'kode barang')); ?></span></td></tr>

<tr><td><center><span class="site-heading-upper text-primary mb-3">NAME

PRODUCT</span></center></td>
 <td><span class="site-upper text-primary mb-3"><?php echo form_input('nama_barang',

'',array('placeholder'=>'nama barang')); ?></span></td></tr>

<tr><td><center><span class="site-heading-upper text-primary mb-3">PRICE

PRODUCT</span></center></td>

<td><span class="site-upper text-primary mb-3"><?php echo form_input('harga_barang',

'',array('placeholder'=>'harga barang')); ?></span></td></tr>

<tr><td colspan="2">

<span class="site-heading-upper text-primary mb-3">

<?php echo form_submit('SUBMIT','SIMPAN DATA');?>

<?php echo anchor('web/barang','KEMBALI');?></span></td></tr>

</table>

<?php echo form_close();?>

</body>

</html>

21. Berikutnya buat file v_input.php kemudian simpan pada folder

Percobaan/application/view. Masukkan koding berikut.

<!DOCTYPE html>
<html lang="id">

<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="">
<!-- Bootstrap core CSS -->
<link href="http://localhost/Percobaan/assets/vendor/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<!-- Custom fonts for this template -->
 <link
href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,
400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i"
rel="stylesheet">

<!-- Custom styles for this template -->

<link href="http://localhost/Percobaan/assets/css/business-casual.min.css"
rel="stylesheet">
<link href="http://localhost/Percobaan/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://localhost/Percobaan/assets/css/jquery.dataTables.min.css"
rel="stylesheet">
</head>

<body>
<h1 class="site-heading text-center text-white d-none d-lg-block">
<span class="site-heading-upper text-primary mb-3">Coffee For Everyone</span>
<span class="site-heading-lower">MOMIJI CAFE</span>
</h1>
<div class="container site-heading text-center text-white d-none d-lg-block">
<h1>Input <small> List Menu! </small></h1>
<table class="table table-bordered table-striped" id="mydata">
<?php echo form_open('web/input_simpan'); ?>
<table>
<tr><td><center><span class="site-heading-upper text-primary mb-3">CODE
PRODUCT</span></center></td>
<td><span class="site-upper text-primary mb-3"><?php echo
form_input('kode_barang',
'',array('placeholder'=>'kode barang')); ?></span></td></tr>
<tr><td><center><span class="site-heading-upper text-primary mb-3">NAME
PRODUCT</span></center></td>
<td><span class="site-upper text-primary mb-3"><?php echo
form_input('nama_barang',
'',array('placeholder'=>'nama barang')); ?></span></td></tr>
<tr><td><center><span class="site-heading-upper text-primary mb-3">PRICE
PRODUCT</span></center></td>
<td><span class="site-upper text-primary mb-3"><?php echo
form_input('harga_barang',
'',array('placeholder'=>'harga barang')); ?></span></td></tr>
<tr><td colspan="2">
 <span class="site-heading-upper text-primary mb-3">
<?php echo form_submit('SUBMIT','SIMPAN DATA');?>
<?php echo anchor('web/barang','KEMBALI');?></span></td></tr>
</table>
<?php echo form_close();?>
</body>
</html>

22. Berikutnya buat file mbarang.php kemudian simpan pada folder

Percobaan/application/models. Masukkan koding berikut.

<?php
class mbarang extends CI_Model{

function vbarang(){
//ambil data barang dari tabel barang
$barang = $this->db->get('barang');
return $barang;
}
function product($kode_barang){
return $this->db-
>get_where('barang',array('kode_barang'=>$kode_barang));
}
}
?>

23. Berikutnya buat file web.php kemudian simpan pada folder

Percobaan/application/controllers. Masukkan koding berikut

<?php

defined('BASEPATH') or exit ('no direct script access allowed');

class Web extends CI_Controller{

function construct(){

parent::__construct();

//$this->load->helper('url');

}
public function index(){

$data['judul'] = "Halaman Home";

$this->load->view('v_header',$data);

$this->load->view('v_home',$data);

$this->load->view('v_footer',$data);

public function about(){

$data['judul'] = "Halaman About";

$this->load->view('v_header',$data);

$this->load->view('v_about',$data);

$this->load->view('v_footer',$data);

public function products(){

$data['judul'] = "Halaman Products";

$this->load->view('v_header',$data);

$this->load->view('v_products',$data);

$this->load->view('v_footer',$data);

public function store(){

$data['judul'] = "Halaman Store";

$this->load->view('v_header',$data);

$this->load->view('v_store',$data);

$this->load->view('v_footer',$data);

function barang(){
 $this->load->model('mbarang');

$judul = "Daftar Barang";

$data['judul'] = $judul;

$data['barang'] = $this->mbarang->vbarang()->result();

$this->load->view('v_barang',$data);

//fungsi untuk menampilkan form input

function input(){

$this->load->view('v_input');

//fungsi untuk menyimpan/input data baru

function input_simpan(){

$databarang = array(

'kode_barang' => $this->input->post('kode_barang'),

'nama_barang' => $this->input->post('nama_barang'),

'harga' => $this->input->post('harga_barang'));

$this->db->insert('barang',$databarang);

redirect('web/barang');

//fungsi untuk edit lalu menampilkan diform

function edit(){

$this->load->model('mbarang');

$kode_barang = $this->uri->segment(3);
 $data['product'] = $this->mbarang->product($kode_barang)->row_array();

$this->load->view('v_edit',$data);

//fungsi untuk menyimpan data setelah diedit

function edit_simpan(){

$id = $this->input->post('id');

$databarang = array(

'kode_barang' => $this->input->post('kode_barang'),

'nama_barang' => $this->input->post('nama_barang'),

'harga' => $this->input->post('harga_barang'));

$this->db->where('kode_barang',$id);

$this->db->update('barang',$databarang);

redirect('web/barang');

//fungsi untuk hapus data

function delete(){

$kode_barang = $this->uri->segment(3);

$this->db->where('kode_barang',$kode_barang);

$this->db->delete('barang');

redirect('web/barang');

function menu(){

$this->load->model('mbarang');

$judul = "Daftar Barang";

$data['judul'] = $judul;
 $data['barang'] = $this->mbarang->vbarang()->result();

$this->load->view('v_menu',$data);

?>

24. Kemudian coba jalankan program dengan membuka membrowser alamat

http://localhost/Percobaan/index.php/web

Bila berhasil maka akan Nampak halaman home seperti berikut.

Hosting Website dan Membuat Domain Name

1. Cari hosting yang cocok untuk anda. Saya menggunakan hosting Infinityfree. Langkah
pertama buka website resmi Infinityfree. Kemudian sign up menggunakan email aktif.
 Setelah sign up maka anda akan dapat email verifikasi kemudian klik

Setelah itu anda akan diminta memasukkan nama domain yang diinginkan. Pada kolom
subdomain masukkan domain anda. Saya menggunakan nama mymomiji.epizy.com. .epizy.com
adalah nama bawaan jika menggunakan domain sediaan dariinfinityfree. Selanjutkan hanya perlu
mengisi data-data yang perlu diisi.

2. Selanjutnya sign in menggunakan akun yang sudah dibuat.

 3. Setelah sig in kemudian masuk kehalaman berikut.

Klik Control Panel untuk mengupload file. Selanjutnya Pilih FTP Accounts, maka akan ada
tampilan untuk mendownload beberapa software yang dapat digunakan sebagai pendukung. Klik
install FileZilla for Windows. Kemudian download dan install pada computer. Jika sudah selesai,
buka FileZilla.

4. Buka kembali akun infinityfree, kemudian isi Host, username, password dan port pada
filezilla sesuai dengan yang tertera pada akun infinityfree. Kemudian klik Quickconnect.
5. Disebelah kiri adalah halaman folder milik kita, dan sebelah kanan tersambung dengan
hosting. Cari fiolder Percobaan tempat membuat rancangan website, kemudian salin
semua isinya ke dalam folder htdocs. Kemudian tunggu sampai semua file terkirim.

6. Kembali ke halaman control panel kemudian klik MySQLDatabase.

Buat database dengan nama sesuai keinginan. Saya menggunakan db_alfany. Kemudian klik
Create Database.

Setelah selesai, klik Admin.

7. Buka kembali database yang sudah dibuat pada phpmyadmin. Kemudian klik Export
maka file database akan terunduh.
 8. Setelah mengklik Admin pada perintah no.6 maka akan tampil halaman berikut,
kemudian klik import.

Klik choose file lalu pilih file database yang telah di export sebelumnya, kemudiak klik Go.
Tunggu sampai berhasil, maka akan muncul halaman berikut.

9. Kembali ke halaman berikut, dan klik File Manager.

Masuk ke htdocts/application/config kemudian klik config.php dan klik edit. Setelah terbuka
ubah configurasi base url menjadi

$config['base_url'] = 'http://mymomiji.epizy.com;

Kemudian klik save lalu close

Selanjutnya buka halaman database sebelumnya.

Simpan informasi mengenai DB Name, User Name dan Host Name untuk dimasukkan kedalam
database.php, untuk password sama dengan password pada ftp account sebelumnya yang
digunakan pada filezilla.

Masih dalam file manager, buka database.php. kemudian ubah konfigurasinya seperti berikut.
10. Terakhir coba nama domain yang telah dibuat : mymomiji.epizy.com
Bila berhasil tampilan website akan seperti berikut.

Home
 About

Product
 Store

Kembali ke halaman HOME, jika di klik Today’s Menu maka akan muncul halaman list
menu yang tersedia di hari itu, seperti berikut.
 Klik LOGIN untuk untuk login dan dapat mengedit data.

Login dengan USERNAM E: admin dan PASSWORD : admin. Maka akan muncul tampilan
seperti berikut.
Pada tampilan tersebut kita dapat menginput, edit atau pun menghapus list menu. Tampilan form
input dan edit data nampak seperti berikut.