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

Wednesday, October 10, 2018

Tugas 3 (Web Programming I)

Oke kali saya akan memberi tutorial bagaimana cara pembuatan input dan output program pembelian di toko bagunan cat. langsung saja cekidot.
  • Form Input
Gigunakan untuk menginput data.


<!DOCTYPE html>
<html>
<head>
<title>Form Input Toko Cat</title>
</head>
<body>
<form action="tampilcat.php" method="post">
<table>
<tr>
<th><h4>TOKO CAT GUNA BANGUN JAYA</h4></th>
</tr>
<tr>
<td>Nama Customer</td>
<td>:</td>
<td><input type="text" name="nama"></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input type="text" name="alamat"></td>
</tr>
<tr>
<td>Jenis Cat</td>
<td>:</td>
<td><select name="jenis">
<option></option>
<option>MOWILEX</option>
<option>DANAPAINT</option>
<option>CATYLAC</option>
</select>
</td>
</tr>
<tr>
<td>Warna Cat</td>
<td>:</td>
<td>
<input type="radio" name="warna" value="Merah">Merah
<input type="radio" name="warna" value="Biru">Biru
<input type="radio" name="warna" value="Kuning">Kuning
</td>
</tr><tr>
<td>Jumlah Beli</td>
<td>:</td>
<td><input type="text" name="jumlah"></td>
</tr>
</table>

<br/>
<input type="submit" value="Hitung"><input type="reset" value="Batal">
</form>
</body>
</html>



  • Tampilan Output
Digunakan untuk menampilkan data dari form input.


<!DOCTYPE html>
<html>
<head>
<title>Tampil Toko Cat</title>
</head>
<body>
<?php
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
$jenis = $_POST['jenis'];
$warna = $_POST['warna'];
$jumlah = $_POST['jumlah'];

switch ($jenis) {
case 'MOWILEX': $jns = 20000;
break;
case 'DANAPAINT': $jns = 30000;
break;
case 'CATYLAC': $jns = 40000;
break;
default: $jns = "Tak ada jenis cat";
}

$total =  $jns*$jumlah;
if ($jumlah >= 5) {
$diskon = $total/100*5;
}
elseif ($jumlah >= 10) {
$diskon = $total/100*10;
}
else{
$diskon = 0;
}

$bayar = $total-$diskon;
?>

<table>
<tr>
<th>TOKO CAT GUNA BANGUN JAYA</th>
</tr>
<tr>
<td colspan="3" style="border-top: 1px dashed #000"></td>
</tr>
<tr>
<td>Nama Customer</td>
<td>:</td>
<td><?php echo $nama; ?></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><?php echo $alamat; ?></td>
</tr>
<tr>
<td>Jenis Cat</td>
<td>:</td>
<td><?php echo $jenis; ?></td>
</tr>
<tr>
<td>Warna</td>
<td>:</td>
<td><?php echo $warna; ?></td>
</tr>
<tr>
<td>Harga</td>
<td>:</td>
<td style="padding-left: 100px"><?php echo "Rp. ",$jns; ?></td>
</tr>
<tr>
<td>Jumlah Beli</td>
<td>:</td>
<td><?php echo $jumlah; ?></td>
</tr>
<tr>
<td colspan="3" style="border-top: 1px dashed #000"></td>
</tr>
<tr>
<td>Total Harga</td>
<td>:</td>
<td style="padding-left: 100px"><?php echo "Rp. ",$total; ?></td>
</tr>
<tr>
<td>Diskon</td>
<td>:</td>
<td style="padding-left: 100px"><?php echo "Rp. ",$diskon; ?></td>
</tr>
<tr>
<td colspan="3" style="border-top: 1px dashed #000"></td>
</tr>
<tr>
<td>Total Bayar</td>
<td>:</td>
<td style="padding-left: 100px"><?php echo "Rp. ",$bayar; ?></td>
</tr>
<tr>
<td colspan="3" style="border-top: 1px dashed #000"></td>
</tr>
</table>
<br/>
<a href="formcat.php">Kembali</a>
</body>
</html>

Sekian dan Terima Kasih.. :)

Monday, October 8, 2018

Jenis-Jenis Perangkat Jaringan

Apa Itu Repeater ???

Repeater adalah suatu alat yang berfungsi memperluas jangkauan sinyal Wi-Fi yang belum tercover oleh sinyal dari server agar bisa menangkap sinyal Wi-Fi. Perangkat Repeater harus 2 alat, yakni untuk menerima sinyal dari server (Client) dan untuk menyebarkan lagi sinyal Wi-Fi (Accsespoint).
Dan itu adalah contoh gambar dari Repeater.


Apa Itu Bridge ???

Dalam dunia internet ada perangkat keras yang disebut dengan bridge, fungsi bridge dalam jaringan komputer sangat penting. Dalam bahasa inggris bridge berarti jembatan, artinya mampu menghubungkan jaringan LAN yang memakai tipe jaringan yang berbeda. Misalnya Ethernet dan Fast Ethernet bisa dihubungkan oleh bridge.
Dan ini adalah contoh dari gambar Bridge dalam jaringan komputer.


Apa Itu NIC ???

NIC atau kartu jaringan adalah sebuah kartu yang berfungsi sebagai jembatan dari komputer ke sebuah jaringan komputer. Jenis NIC yang beredar, terbagi menjadi dua jenis yakni NIC yang bersifat fisik dan NIC yang bersifat logis. Contoh NIC yang bersifat fisik adalah NIC Ethernet, Token Ring, dan lainnya. Sementara NIC yang bersifat logis adalah loopback adapter dan Dial-up Adapter. Disebut juga sebagai Network Adapter. Setiap jenis NIC diberi nomor alamat yang disebut MAC Address, yang dapat bersifat tetep (statis) atau dapat diubah (dinamis) oleh pengguna.
Dan ini adalah contoh dari gambar NIC.

Thursday, September 27, 2018

Tugas 2 (Web Programming I)

<head>
<title>Rumus Volume Kubus</title>
</head>
<?php
$teks1 = "Belajar Menghitung ";
$teks2 = "Volume Kubus";
$hasil = $teks1.$teks2;
echo "$hasil<br/>";

$sisi=15;
echo "Panjang Sisi kubus = $sisi<br/>";

$jumlah=$sisi*$sisi*$sisi;
echo "Volume Kubus = $jumlah cm3";
?>

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

Saturday, September 22, 2018

Jenis-Jenis Jaringan Komputer

Apa itu PAN ?

Pengertian jaringan area pribadi (Personal Area Network) atau biasa yang disebut dengan PAN adalah jaringan komputer untuk perangkat interkoneksi yang berpusat pada ruang kerja seseorang. PAN menyediakan transmisi data di antara perangkat seperti komputer, ponsel cerdas, tablet, dan asisten digital pribadi. PAN dapat digunakan untuk komunikasi di antara perangkat pribadi itu sendiri, atau untuk menghubungkan ke jaringan tingkat yang lebih tinggi dan Internet di mana satu perangkat utama mengambil peran sebagai gateway. PAN dapat dilakukan melalui bus komputer berkabel seperti USB.

Kontrol pada jaringan PAN dilakukan dengan authoritas pribadi. Adapun teknologi yang digunakan untuk membuat jaringan PAN antara lain adalah Wireless Application Protocol (WAP) dan Bluetooth.
Namun jangkauan dari jaringan PAN biasanya hanya beberapa meter.


Apa itu LAN ?


Pengertian Local Area Network adalah jaringan komputer yang jaringannya hanya mencakup wilayah kecil seperti jaringan komputer kampus, gedung, kantor, dalam rumah, sekolah atau yang lebih kecil. Saat ini kebanyakan LAN berbasis pada teknologi IEEE 802.3 Ethernet menggunakan perangkat switch, yang mempunyai kecepatan transfer data 10, 100, atau 1000 Mbit/s. Selain teknologi Ethernet, saat ini teknologi 802.11b (atau biasa disebut Wi-fi) juga sering digunakan untuk membentuk LAN. Tempat-tempat yang menyediakan koneksi LAN dengan teknologi Wi-fi biasa disebut hotspot.

Secara umum jaringan LAN memiliki 3 arsitektur fisik yaitu :
  1. Topologi Bus
  2. Topologi Ring
  3. Topologi Star
Kecepatan jaringan LAN tradisional berkisar 10 sampai 100 Mbps sementara jaringan LAN modern memiliki kecepatan sampai ratusan megabit per detik.




Apa itu MAN ?



Jaringan wilayah metropolitan atau Metropolitan area network atau disingkat dengan MAN adalah suatu jaringan dalam suatu kota dengan transfer data berkecepatan tinggi, yang menghubungkan berbagai lokasi seperti kampus, perkantoranpemerintahan, dan sebagainya. Jaringan MAN adalah gabungan dari beberapa LAN. 
Jangkauan dari MAN ini antar 10 hingga 50 km, MAN ini merupakan jaringan yang tepat untuk membangun jaringan antar kantor-kantor dalam satu kota antara pabrik/instansi dan kantor pusat yang berada dalam jangkauannya.


Apa itu WAN ?

Jaringan area luas (Wide Area Network) atau yang disebut WAN merupakan jaringan komputer yang mencakup area yang besar sebagai contoh yaitu jaringan komputer antar wilayah, kota atau bahkan negara, atau dapat didefinisikan juga sebagai jaringan komputer yang membutuhkan router dan saluran komunikasi publik.

WAN digunakan untuk menghubungkan jaringan area lokal yang satu dengan jaringan lokal yang lain, sehingga pengguna atau komputer di lokasi yang satu dapat berkomunikasi dengan pengguna dan komputer di lokasi yang lain.

Friday, September 21, 2018

Tugas 1 (Web Programming I)

<!DOCTYPE html>
<html>
<head>
<title>Tugas1</title>
</head>
<body>
<center>
<table border="1">
<tr>
<td colspan="6" bgcolor="#ffcc99"><center>DAFTAR PRODUK</center></td>
</tr>
<tr>
<td rowspan="7" colspan="4" bgcolor="#ffff99">
<img src="Canon EOS.png" width="100px" height="100px">
</td>
<td bgcolor="#40ff00">Nama <br/>Produk</td>
<td bgcolor="#ff66cc">Canon EOS M10 Kit EF-M 15-45mm</td>
</tr>
<tr>
<td bgcolor="#40ff00">Harga</td>
<td bgcolor="#ff66cc">Rp 4,899,000</td>
</tr>
<tr>
<td bgcolor="#40ff00">Fitur <br/>Produk</td>
<td bgcolor="#ff66cc">
<li>Kamera mirorrless</li>
<li>Efektifitas Piksel : 18 MP</li>
<li>Tipe sensor : CMOS DIGIC 6</li>
<li>Layar : 3.0 Inch</li>
<li>Memiliki lampu flash dengan jarak jangkauan 5 meter</li>
</td>
</tr>
</table>
</center>
</body>
</html>


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