Search This Blog

Wednesday, November 28, 2018

Tugas 4 (Web Programming I)

Oke sekarang saya akan membuat suatu rumus lingkaran dengan menggunakan framework CodeIgniter dengan konsep Model, View dan Controller (MVC). Sebelumnya project CI (nama folder) saya beri nama "rental_buku". Langsung saja simak caranya berikut ini.

  • Pertama kalian membuat file baru dan beri nama menjadi lingakaran_model.php lalu simpan di folder models. application\models\lingkaran_model.php

<?php
class Lingkaran_model extends CI_Model{
//mendefinisikan kosntanta untuk nilai PHI
const PHI = 3.14;

//atributt model
private $jarijari;

//metode untuk menentukan nilai $jarijari
public function set_jarijari($r){
$this->jarijari=$r;
}

//metode untuk mengambil nilai $jarijari
public function get_jarijari(){
return $this->jarijari;
}

//metode untuk menghitung luas lingkaran
public function hitung_luas(){
return self::PHI*$this->jarijari*$this->jarijari;
}

//metode untuk menghitung keliling lingkaran
public function hitung_keliling(){
return 2*self::PHI*$this->jarijari;
}
}

  • Kedua kalian membuat file bernama lingkaran.php kemudian simpan di folder controllers. application\controllers\lingkaran.php

<?php
class Lingkaran extends CI_Controller{
Public function index(){
if (isset($_POST['proses'])){
//meload model Lingkaran_model
$this->load->model('Lingkaran_model');

//menangkap model yang telah dimuat oleh controller
$model=$this->Lingkaran_model;

//Mengambil nilai dari form input
$jarijari=$_POST['inputjari'];

//menentukan nilai jari jari
$model->set_jarijari($jarijari);

//memuat view dan mengirimkan $model ke view
$this->load->view('lingkaranview',array('model'=>$model));
}else{
$this->load->view('lingkaranview');
}
}
}

  • Dan yang terakhir buat lah tampilan dan beri nama file tersebuat dengan nama lingkaranview.php selanjutnya simpan di folder views. application\views\lingkaranview.php

<!DOCTYPE html>
<html>
<head>
<title>Demo Model, View, Controller</title>
</head>
<body>
<form action="http://localhost/rental_buku/lingkaran" method="post">
<h1>Model Rumus Lingkaran</h1><br>
<input type="text" name="inputjari" placeholder="Masukan Jari-Jari">
<input type="submit" name="proses" value="Proses"><br><br>
<?php error_reporting(0) ;?>
<table>
<tr>
<!-- memanggil metode get_jarijari() dari objek $model -->
<td>Nilai Jari Jari</td>
<td>:</td>
<td><?php echo $model->get_jarijari();?></td>
</tr>
<tr>
<!-- memanggil metode hitung_luas() dari objek $model -->
<td>Luas Lingkaran</td>
<td>:</td>
<td><?php echo $model->hitung_luas();?></td>
</tr>
<tr>
<!-- memanggil metode hitung_keliling() dari objek $model -->
<td>Keliling Lingkaran</td>
<td>:</td>
<td><?php echo $model->hitung_keliling();?></td>
</tr>
</table>
<br>
<table>
<tr>
<td>Nama</td>
<td>:</td>
<td>Willy Permana</td>
</tr>
<tr>
<td>Nim</td>
<td>:</td>
<td>12160209</td>
</tr>
<tr>
<td>Kelas</td>
<td>:</td>
<td>12.5D.11</td>
</tr>
</table>
</form>
</body>
</html>

Lalu running project dengan url "http://localhost/rental_buku/lingkaran". Oke cukup disitu script coding yang saya buat, jika kalian berhasil maka tampilan nya akan menjadi seperti berikut. Terima kasih :)

NB : jika ada yang mengalami error pada tampilan saat merunning url nya, maka ubah dulu script di lingkaranview.php. Dalam form action tersebut tambah kan "index.php" maka tag nya pun ikut berubah menjadi <form action="http://localhost/rental_buku/index.php/lingkaran" method="post">.

Sunday, November 4, 2018

KUIS - Web Programming I

Oke guys.. kali ini saya akan menshare bagaimana cara membuat project perpustakaan berbasis web tanpa database.
Cekidot...!
Buat folder di xampp/htdocs/perpus

  • Index.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">
<marquee scrollamount="3"><h2>Selamat Datang Di Perpustakaan Universitas Bina Sarana Informatika</h2></marquee>
</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href="login.php">Login</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Daftar Buku</a></li>
</ul>
</div>
<div class="middle">
<h3 align="center">Berita</h3>
<center>Membuat Design Web Responsive</center><br>
<div class="gambar" style="width: 100%">
<img src="images/webresponsive.jpg" height="70%" width="100%">
</div>
<p><a href="webresponsive.php">Baca Selengkapnya >> </a></p>
</div>
<div class="right">
<h3 align="center">Buku Terpopuler</h3>
<ul>
<li><a href="webdesign.php">Web Design</a></li>
<li><a href="pemrograman.php">Pemrograman</a></li>
<li><a href="database.php">Database</a></li>
</ul>
</div>
</div>
<div class="footer">
<p style="text-align: center !important">Copyright &copy; 2018 Belajar CSS Responsive</p>
</div>
</div>
</body>
</html>


  • Login.php

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="css/style_login.css">
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<br>
<center><h2>Silahkan Anda Login Terlebih Dahulu</h2></center>
<div class="login">
<form action="home.php" method="post" onSubmit="return validasi()"><br>
<div>
<label>Username</label>
<input type="text" name="username" id="username"/>
</div>
<div>
<label>Password</label>
<input type="password" name="password" id="password"/>
</div>
<div>
<center>
<input type="submit" value="Login" class="tombol">
<input type="reset" value="Batal" class="tombol">
</center>
</div>
</form>
</div>
</body>
</html>



  • Home.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?php
$user = $_POST['username'];
$pass = $_POST['password'];
?>
<div class="container">
<h4>Anda Berhasil Login Dengan Nama : <?php echo $user;?></h4>
<div class="header">
<marquee scrollamount="3"><h2>Perpustakaan Universitas Bina Sarana Informatika</h2></marquee>
</div>
<div class="main">
<div class="left">
<h3 align="center">Menu</h3>
<ul>
<li><a href="login.php">Logout</a></li>
<li><a href="#">Home</a></li>
<li><a href="daftarbuku.php">Daftar Buku</a></li>
</ul>
</div>
<div class="middle">
<h3 align="center">Berita</h3>
<center>Membuat Design Web Responsive</center><br>
<div class="gambar" style="width: 100%">
<img src="images/webresponsive.jpg" height="70%" width="100%">
</div>
<p><a href="webresponsive.php">Baca Selengkapnya >> </a></p>
</div>
<div class="right">
<h3 align="center">Buku Terpopuler</h3>
<ul>
<li><a href="webdesign.php">Web Design</a></li>
<li><a href="pemrograman.php">Pemrograman</a></li>
<li><a href="database.php">Database</a></li>
</ul>
</div>
</div>
<div class="footer">
<p style="text-align: center !important">Copyright &copy; 2018 Belajar CSS Responsive</p>
</div>
</div>
</body>
</html>


  • DaftarBuku.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Daftar Buku</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="header">
<marquee scrollamount="3"><h2>Daftar Buku di Universitas Bina Sarana Informatika</h2></marquee>
</div>
<div class="main">
<div class="left">
<div class="gambar" style="width: 100%">
<img src="images/webresponsive.jpg" height="70%" width="100%">
<p><a href="webresponsive.php">Membuat Design Web Responsive</a></p>
</div>
</div>

<div class="left">
<div class="gambar" style="width: 100%">
<img src="images/webdesign.jpg" height="70%" width="100%">
<p><a href="webdesing.php">Mendesain Web Dengan Dinamis</a></p>
</div>
</div>

<div class="left">
<div class="gambar" style="width: 100%">
<img src="images/database.jpg" height="70%" width="100%">
<p><a href="database.php">Tutorial Belajar Mahir Database MySQL</a></p>
</div>
</div>

<div class="left">
<div class="gambar" style="width: 100%">
<img src="images/pemrograman.jpg" height="70%" width="100%">
<p><a href="pemrograman.php">Kumpulan Script Bahasa Pemrograman Terbaru</a></p>
</div>
</div>
</div>
<div class="footer">
<p style="text-align: center !important">Copyright &copy; 2018 Belajar CSS Responsive</p>
</div>
</div>
</body>
</html>





Untuk file css disimpan dalam folder baru dalam folder project perpus/css. Terdapat 2 file css yaitu style.css berguna untuk memperindah tampilan halaman web dan style_login.css khusus untuk tampilan halaman login.

  • style.css

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #ffbf80;
font-family: 'Verdana', arial, sans-serif;
font-size: 15px;
}
p{
margin-bottom: 20px;
line-height: 1.5em;
text-align: justify;
}
h3{
margin-bottom: 20px;
border-bottom: 1px solid #aaa;
}
a{
text-decoration: none;
color: #333;
}
a:hover{
color: #666;
}
.container{
max-width: 80%;
margin: 20px auto;
background: #ff9933;
overflow: hidden;
padding: 10px;
}
.header{
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
background: #fff;
}

/* main */
.left{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
background: #fff;
}
.left ul{
list-style-type: none;
}
.left ul li{
display: block;
}
.left ul li a{
display: block;
border-bottom: 1px solid #dedede;
margin-bottom: 10px;
padding: 10px 5px;
font-color: #D3D2ED;
}
.left ul li a:hover{
color: #461AF3;
}
.middle{
width: 47%;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: left;
background: #fff;
}
.middle img{
max-width: 100%;
height: auto;
}
.middle a{
font-weight: bold;
}
.right{
width: 250px;
border: 1px solid #dedede;
padding: 10px;
margin: 10px;
float: right;
background: #fff;
}
.right ul{
list-style-type: none;
}
.right ul li{
display: block;
}
.right ul li a{
display: block;
border-bottom: 1px solid #dedede;
margin-bottom: 10px;
padding: 10px 5px;
}
.right ul li a:hover{
color: #461AF3;
}
.footer{
clear: both;
border: 1px solid #dedede;
padding: 15px;
margin: 10px;
background: #fff;
}

/*MEDIA QUERIES ( Responsive)
******************************************/
@media screen and(max-width: 959px){
#container{
width: 100%;
}
#left-column{
width: 70%;
}
#right-column{
width: 30%;
}
img{
width: 100%;
}
}
@media screen and(max-width: 1080px){
.container{
width: 100%;
}
.left{
width: 25%;
}
.middle{
width: 68%;
float: right;
}
.right{
clear: both;
padding: 1% 4%;
width: auto;
float: none;
background: #D6CCFE;
}
img{
width: 100%;
}
}
@media screen and(max-width: 4000px){
.container{
width: 100%;
}
.left{
width: 25%;
}
.middle{
width: 68%;
float: right;
}
.right{
clear: both;
padding: 1% 4%;
width: auto;
float: none;
background: #D6CCFE;
}
img{
width: 100%;
}
}
/* Untuk ukuran layar 700px kebawah */
@media screen and(max-width: 780px){
.header,
.footer{
text-align: center;
}
.left{
width: auto;
float: none;
}
.middle{
width: auto;
float: none;
}
.right{
width: auto;
float: none;
}
img{
width: 100%;
}
}

  • Style_login.css
body{
background: #3498db;
font-family: sans-serif;
}
h2{
color: #fff;
}
.login{
padding: 1em;
margin: 2em auto;
width: 17em;
background: #fff;
border-radius: 3px;
}
label{
font-size: 10pt;
color: #555;
}
input[type="text"],
input[type="password"],
textarea{
padding: 8px;
width: 95%;
background: #c0c0c0;
border: 0;
font-size: 10pt;
margin: 6px 0px;
}
.tombol{
background: #3498db;
color: #fff;
border: 0;
padding: 5px 8px;
margin: 20px 0px;
}

Berpindah pada javascript disimpan pada folder baru dalam folder perpus/js
  • Login.js
function validasi() {
var username = document.getElementBlyd("username").value;
var password = document.getElementBlyd("password").value;
if (username != "" && password != "") {
return true;
}else{
alert("Username dan Password harus di isi !");
return false;
}
}

Baik cukup disitu script dalam membuat project perpustakaan. Sekian dan terima kasih :)

Nama : Willy Permana
Nim   : 12160209
Kelas : 12.5D.11