Kamis, 14 April 2016

Belajar CodeIgniter

hay teman-teman
kali ini saya akan membagikan sedikit tutorial menggunakan Codeigniter dalam Pemrograman web
langsung saja
- pertama-tama install terlebih dahulu CodeIgniter. kalau saya CodeIgniter-3.0.4.
kemudian ekstrak file dan simpan pada direktori xampp/htdocs.

- buka file config.php di direktori  xampp/htdocs/CI/application/config
- edit bagian base_url


- lalu buka file database.php pada direktori xampp/htdocs/CI/application/config lalu edit menggunakan Sublme Text
- ubah username dan password serta database seuai dengan yang telah kita buat tadi

database.php


Membuat Hello Word

membuat tampilan pembuka, HELLO WORD

View

- buat file baru pada direktori xampp/htdocs/CI/application/view 
- beni nama Hello_word.php dan coba ketikkan kodenya seperti dibawah ini

Hello_word.php
<?php  
 defined('BASEPATH') OR exit('No direct script access allowed');  
 ?><!DOCTYPE html>  
 <html lang="en">  
 <head>  
      <meta charset="utf-8">  
      <title>Welcome codeig</title>  
      <style type="text/css">  
      ::selection { background-color: #E13300; color: Pink; }  
      ::-moz-selection { background-color: #E13300; color: white; }  
      body {  
           background-color: #fff;  
           margin: 40px;  
           font: 13px/20px normal Helvetica, Arial, sans-serif;  
           color: #4F5155;  
      }  
      a {  
           color: #003399;  
           background-color: grey;  
           font-weight: normal;  
      }  
      h1 {  
           color: #444;  
           background-color: transparent;  
           border-bottom: 1px solid #D0D0D0;  
           font-size: 19px;  
           font-weight: normal;  
           margin: 0 0 14px 0;  
           padding: 14px 15px 10px 15px;  
      }  
      code {  
           font-family: Consolas, Monaco, Courier New, Courier, monospace;  
           font-size: 12px;  
           background-color: #f9f9f9;  
           border: 1px solid #D0D0D0;  
           color: #002166;  
           display: block;  
           margin: 14px 0 14px 0;  
           padding: 12px 10px 12px 10px;  
      }  
      #body {  
           margin: 0 15px 0 15px;  
      }  
      p.footer {  
           text-align: right;  
           font-size: 11px;  
           border-top: 1px solid #D0D0D0;  
           line-height: 32px;  
           padding: 0 10px 0 10px;  
           margin: 20px 0 0 0;  
      }  
      #container {  
           margin: 10px;  
           border: 1px solid #D0D0D0;  
           box-shadow: 0 0 8px #D0D0D0;  
      }  
      </style>  
 </head>  
 <body>  
 <div id="container">  
      <h1>**HELLO WORD**</h1>
      <> 
   <p>Selamat Datang</p>  
      <p class="footer">punya Elva<strong>Teknik Informatika ITS</strong> Surabaya. <?php echo (ENVIRONMENT === 'development') ? 'CodeIgniter Version <strong>' . CI_VERSION . '</strong>' : '' ?></p>  
 </div>  
 </body>    
 </html>  


Controller
-untuk mencoba tampilan sederhana pada html, tambahkan kode berikut pada file welcome.php di direktori  xampp/htdocs/CI/application/controller
- tambahkan kode dibawah ini pada file tersebut







- untuk melihat hasilnya pada ketikkkan localhost/CI/
maka akan muncul



Membuat Tampilan PhoneBook

- jangan lupa nyalakan xampp terlebih dahulu
- kemudian buat database baru pada PhpMyAdmin dengan nama pweb.
- lalu buat tabel baru  dengan nama Phonebook 
- Tambahkan atribut Nama, Alamat, No.telp, Email, Kelas








<?php
class Blog extends CI_Controller {

 public function index()
 {
  echo 'Hello World!';
 }
}
?>
- lalu kemudian tambah kode baru dalam file yang sama untuk membuat tabel pada CI
- coba ketikkan code berikut

<?php  
 defined('BASEPATH') OR exit('No direct script access allowed');  
 class tes extends CI_Controller {  
           /**  
            * Index Page for this controller.  
            *  
            * Maps to the following URL  
            *                     http://example.com/index.php/welcome  
            *          - or -  
            *                     http://example.com/index.php/welcome/index  
            *          - or -  
            * Since this controller is set as the default controller in  
            * config/routes.php, it's displayed at http://example.com/  
            *  
            * So any other public methods not prefixed with an underscore will  
            * map to /index.php/welcome/<method_name>  
            * @see https://codeigniter.com/user_guide/general/urls.html  
            */  
           function __construct(){  
                     parent::__construct();  
                     $this->load->helper(array('url','form'));  
                     $this->load->model('ctrl');  
           }  
           function ndelok()            
           {  
             $data['pb'] = $this->ctrl->index();  
             $this->load->view('tesview', $data);  
           }  
 }   
 ?>

- untuk mengambil database  pweb yang kitabuat tadi kita harus masuk pada direktori xampp/htdocs/CI/application/models lalu buat file baru misal take.php
-ketikkan kode berikut

preview.php
<?php  
 /**  
 *   
 */  
 class table_model extends CI_Model{            
           function __construct()  
           {  
                     parent::__construct();  
                     $this->load->database();  
           }  
           function index(){  
                     $ndelok = $this->db->get('mhs');  
                     return $ndelok->result();  
           }  
 }  
 ?>

- untuk mengambil database  pweb yang kitabuat tadi kita harus masuk pada direktori xampp/htdocs/CI/application/view lalu buat file baru misal preview.php
-ketikkan kode berikut

- kemudia untuk menampilkan data tabel html, buka localhost pada browser dengan syntax localhost/CodeIgniter-3.0.4/index.php/nama_controller/nama_view. 
ketikkan  localhost/CodeIgniter-3.0.4/index.php/ctrl/preview
maka akan muncul tampilan di prowser


Jumat, 01 April 2016

TUGAS ETS PEMROGRAMAN WEB A

Hy ketemu lagi dengan elva
nah kali ini aku akan bercerita sedikit tentang web yang sudah dibuat oleh aku dan kelompokku.
PENASARAN??
cus nih alamat webnya ourtrav.com. langsung  klik aja.
sudah ? ketemu?
oke untuk yang lagi mager ngeklik. nih aku kasi tau tampilan web nya seperti apa

Soal Pertama:




















nah dari kalian pasti ada yang bertanya berapa sih biaya yang dikeluarkan untuk mengerjakan web tersebut?

jadi untuk membuat web pertama-tama yang kita butuhkan yakni nama domain. dan hosting
wah trus gimana dong?
tenang sekarang sudah banyak web penyedia hosting yang yang graatis maupun berbayar. Untuk hosting sendiri kita membeli di situs penyedia rencong.net seharga Rp. 190.000,00. dengan rincianhosting pribadi RP. 60.000 ditambah domain seharga Rp. 130.000
nah jadilah kita memakai nama ourtrav.com dengan layanan hosting dan domain selama 6 bulan dan kapasitas 100 MB. tunggu kiriman email dari penyedia.

Jadi deh Web kalian. tapi tunggu. web tersebut belum ada isi apapun. nah untuk mengedit isi dari web. login ke Cpanel kalian

















nah disini kalian bisa menyeting apa saja yang kalian butuhkan.
untuk pengeditan berikutnya gunakan wordpress.com sebagai medianya
Langkah berikutnya yakni pilih tema web yang kalian inginkan. bisa cari di google. banyaak banget template tema yang bisa kalian gunaka . disini kita menggunakan tema Zerif lite yang cukup elegan



















next. silakan edit sesuka hati kalian di laman http://www.ourtrav.com/wp-admin kita bisa menambahkan data apapun yang kita inginkan

















Jadilah WEB kalian. yeay!
Apasih ourtrav.com itu ???
ourtrav.com sebuah web penyedia informasi tempat wisata serta hotel di seluruh indonesia

















Untuk fitur apa saja yang ada di web ini bisa lihat langsung di ourtrav.com . lebih detailnya sebagai berikut

- Fitur WISATA
temukan tujuan dan lokasi wisata yang kalian inginkan


















klik readmore untuk info yang lebih lengkap
terdapat beberapa galeri yang menambah wawasan pengunjung serta peta yang tersambung langsung ke googlemaps.com sebagai penunjuk arah menuju tempat tersebut


















terdapat juga ulasan dan revie menarik terkait tempat wisata tujuan serta tempat wisata terkait yang bisa dikunjungi















- Fitur HOTEL
berbagai informasi tentang hotel disekitar tempat wisata

















terdapat juga ulasan, review serta informasi seputar hotel juga lokasi hotel tersebut
















untuk mencari tempat wisata juga hotel sekaligus dalam satu tempat, tulis kota mana yang anda inginkan di kolom search
















- Fitur AKUN
kita juga bisa mendaftar untuk menjadi member dengan email


Nah itulah tadi seputar web yang kami buat.


Soal Kedua:

Pertama-tama nyalakan terlebih dahulu XAMPP kalian dengan mengklik start pada Apache dan Mysql. lalu klik admin pada My Sql. kemudian akan muncul local host di browser kalian














nah kemudian buat database baru dengan nama latihan1
lalu buat juga tabel mk yang berisi kode_mk, nama_mk, dan jumlah_praktikan







Tabel User yang berisi kode_user, nama_user dan password_user







selanjutnya insertkan data matakuliah di tabel MK











kemudian buat file baru di Sublime Text dengan nama koneksi.php. berikut kodenya
koneksi.php

<?php

$host = 'localhost';
$database = 'monitoring_praktikum';
$username = 'root';
$password ='';


$connection = mysql_connect($host, $username, $password, $database);

echo "berhasil";
?>

buat lagi file dengan nama login.php
agar kita bisa membuat form pada localhost berisi perintah untuk login dengan username dan password

login.php

<html>
<head>
<title>LOGIN</title>
</head>
<style>
div {
    background-color: lightgreen;
    width: 200px;
    padding: 10px;
    margin: 10px;
}
</style>
<body>
<div>
<form>
Username : <input type = 'text' name = 'username'> <br> <br>
Password : <input type = 'password' name = 'password'> <br><br>

<input type = 'button' value = 'Login'>
</form>
</div>
</body>

</html>

ketika kita jalankan di local host, maka akan muncul tampilan form login seperti berikut















nah untuk pengisian data, buat folder lagi untuk menampilkan data matakuliah  yang kita punya

tampilkandata.php

<!DOCTYPE html>
<html>
<head>
<title>Tampilkan Data</title>
</head>
<body>
<h1>Daftar Mata Praktikum dan Jumlah Praktikan</h1>
<table border="1" cellpadding="3" cellspacing="0">
<tr>
<th>No.</th><th>Kode</th><th>Mata Praktikum</th><th>Jumlah Praktikum</th>
</tr>
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("monitoring_praktikum");

$sql = mysql_query("select * from praktikum");
if(mysql_num_rows($sql)==0)
{
echo '<tr><td colspan="4">tidak ada data!</td></tr>';
}
else
{
$no = 1;
while($data = mysql_fetch_assoc($sql))
{
echo '
<tr>
<td>'.$no.'</td>
<td>'.$data['kode_mk'].'</td>
<td>'.$data['nama_mk'].'</td>
<td>'.$data['jumlah_praktikan'].'</td>
</tr>
';
$no++;
}
}
?>
</table>
<br><input style = "text-align: right" type = 'button' value = 'Tambah Data MK'>
</body>
</html>


maka ketika dijalankan di localhost akan muncul tampilan matakuliah yang kita insertkan tadi seperti dibawah ini