Showing posts with label Pemrograman Web. Show all posts
Showing posts with label Pemrograman Web. Show all posts

Monday, May 16, 2016

Praktikum Pemrograman WEB Kelas A Teknik Informatika UMJ 20152


Selamat Pagi, ini adalah wadah sebagai informasi perkuliah Praktikum Pemrograman WEB kelas A, modul dan tugas bisa langsung di download dan tidak kawatir tidak mengerjakan tugas karena lupa

Berikut beberapa tambahan dan tugas :
2. Tugas Modul 5

3. Modul 9 Twitter Bootstrap (laporan dikumpulkan tgl 21 Juni 2016)

4. Tugas Akhir Praktikum

  • Meng-Hosting Program Modul 8.
  • tempat hosting ditentukan sendiri.
  • Buatlah tutorial untuk mengupload Program Anda ke hosting dalam bentuk PDF.
  • Pragram WEB+SQL Modul-8 dan Tutorial Hosting di kumpulkan dalam bentuk RAR ke email: rhaomlie@gmail.com . 
  • Subject : TUGAS_PRAKTIKUM WEB_ NIM_NAMA

  • Pengumpulan Nama Domain/URL klik DISINI dan Reviwe Hasil

  • Terakhir pengumpulan sebelum tanggal 21 Juni 2016.


dan untuk mengecek kehadiran bisa dilihat disini!

Bila ada keluhan, masalah ataupun semacamnya bisa langsung menghubungi saya via WA/ SMS kapanpun dan dimanapun. yah itu saja sampai jumpa di pertemuan berikutnya.

Wednesday, June 3, 2015

Modul Pemrograman Web Teknik Informatika 20142


Modul Praktikum Pemrograman Web Teknik Informatika 20142
Assalamualaikum Wr Wb...
Selamat Berjumpa kembali sahabat kreatif, kali ini Rhaomlie Ksatria Pengelana membagikan Modul Praktikum Pemrograman Web Teknik Informatika Universitas Muhammadiyah Jember tahun Pelajaran 20142
Semoga bisa membantu sahabat sekalian dalam belajar Pemrograman Web

Berikut Isi Modul
Modul_1_-_HTML
Modul_2_-_Dasar-Dasar_PHP
Modul_3_-_PHP_Dasar_Lanjutan
Modul_4_-_PHP_-_MySQL
Modul_5_-_PHP-MySQL_Lanjutan
Modul_6_-_CSS
Modul_7_-_Twitter_Bootstrap
Modul_8_-_JavaScript
Modul_9_-_Website_CRUD_Sederhana
Modul_10_-_Session_PHP
Modul_11_-_Ajax
Modul_12_-_MD5_Login_Multiuser

Dosen Pengampu : Mudafiq Riyan Pratama, S.Kom

Download Modul Pemrograman Web Teknik Informatika 20142
>>>>> Download <<<<<

Monday, March 9, 2015

Tutorial membuat kalkulator sederhana dengan PHP

Assalamualaikum wr wb..
Selamat padi sahabat kretif dan saya ucapkan terimakasih untuk kunjungan ke blog yang sederhana ini...
Pada kesempatan kali ini saya akan membagikan tutorial membuat kalkulator sederhana dengan php.

tools yang harus di persiapkan :

  1. Notepad++ / netbeans / dreamweaver (pilih salah satu aja)
  2. Mozilla Firefok / Google Crhome / browser lainnya
  3. XAMPP

Sebelum sobat membat program php, alangkah baiknya jika sobat instal aplikasi XAMPP terlebih dahulu karena program PHP tidak bisa langsung di jalankan pada browser

Langkah - langkahnya..
Buat folder pada local C:\xampp\htdocs dengan nama belajar
Buka Notepad++ lalu simpan dengan nama kalkulator.php pada C:\xampp\htdocs\belajar
hasilnya seperti ini :



buatlah program tampilan/ desain kalkulator sederhana
kode :


<!DOCTYPE html>
<html>
<head>
<title>kalkulator Sederhana</title>
</head>

<body >
<form method="get" >
<table>
<tr>
<td colspan="4" align="center"><h1>KALKULATOR RHAOMLIE</h1></td>
</tr>
<tr>
<td>Angka 1</td>
<td>Angka 2</td>
<td></td>
<td>Hasil</td>
</tr>
<tr>
<td><input type="number" name="angka1" /></td>
<td><input type="number" name="angka2" /></td>
<td>=</td>
<td><input type="text" name="hasil" disabled/></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="submit" name="tambah" value="+" />
<input type="submit" name="kurang" value="-" />
<input type="submit" name="kali" value="x" />
<input type="submit" name="bagi" value="/" />
</div></td>
</tr>
</table>

</form>
</body>
</html>



membuat program inputan angka dengan php
lihat kode text field untuk menampilkan angka1 dan angka2 dan hasil

<tr>
<td><input type="number" name="angka1" /></td>
<td><input type="number" name="angka2" /></td>
<td>=</td>
<td><input type="text" name="hasil" disabled/></td>
</tr>

tambahkan kode php pada text field tersebuat

<?php echo $angka1; ?>
<?php echo $angka2; ?>
<?php echo $hasil; ?>

hasilnya akan seperti ini

<tr>
<td><input name="angka1" type="number" required value="<?php echo $angka1; ?>" /></td>
<td><input name="angka2" type="number" required value="<?php echo $angka2; ?>" /></td>
<td>=</td>
<td><input name="hasil" type="text" disabled value="<?php echo $hasil; ?>"/></td>
</tr>

keterangan
required : agar ada keterangan text field tidak boleh kosong
disable :


nah sekarang mengaktifkan tombol button + - x /
tambahkan kode berikut diatas <!DOCTYPE html>

<?php
$hasil ="";
if(isset($_GET['angka1']) and isset($_GET['angka2']) ){
$angka1 = $_GET['angka1'];
$angka2 = $_GET['angka2'];

if(isset($_GET['tambah'])){

$hasil = $angka1+$angka2;
}
else if(isset($_GET['kurang'])){
$hasil = $angka1 - $angka2;
}
else if(isset($_GET['kali'])){
$hasil = $angka1 * $angka2;
}
else if(isset($_GET['bagi'])){
$hasil = $angka1 /$angka2;
}
}
?>







nah sekarang programnya sudah jadi tinggal modifikasi tampilan aja

modifikasi background

cari kode <body> ubahlah menjadi kode <body bgcolor="#99FF33" background="green.jpg" marginwidth="100">
keterangan :
bgcolor="#99FF33" : warna background
background="green.jpg" : gambar background
marginwidth="100" : lebar form
kayak apa sih hasilnya, kayak gini :



udah berwana kan, tapi masih ada yang kurang kayaknya, modifikasi lagi yuk pada text fieldnya...
cari kode ini :

<tr>
<td><input name="angka1" type="number" value="<?php echo $angka1; ?>" /></td>
<td><input name="angka2" type="number" value="<?php echo $angka2; ?>" /></td>
<td>=</td>
<td><input name="hasil" type="text" disabled value="<?php echo $hasil; ?>"/></td>
</tr>
<tr>

tambahakan pada kode text field angka1 dan angka2 ( style="background-color:#CCFF00")
lalu pada hasil (style="background-color:#FC0")
kodenya akan berubah seperti ini
coba test ulang..



tuh kan sudah warna wani... acik acikk.....
test dulu siapa tau ada yang gak sesuai...

masukkan angka pada salah satu filed..



tu kan ada pemberitahuan jika text field tidak boleh kosong
coba cek kedua ..



hasilnya udah muncul, WOW WOW WOWW... HO.. HOO..

SELESAI

Sunday, March 1, 2015

Tutorial Membuat Form Pendaftaran dengan HTML

Tutorial Membuat Form Pendaftaran dengan HTML 


Selamat pagi sobat kreatif...
Di pagi hari yang cerah ini saya akan membagikanTutorial Membuat Form Pendaftarn dengan HTML yang sudah saya modifikasi dari tutorial sebelumnya yaitu Membuat Form Pendaftaran menggunakan HTML . untuk melihat yang sebelumnya bisa cek disini.. 
belajar itu memang gampang gampang susah, jika tidak gampang ya susah hee.. piss mas Bro,,, :v

Penasaran ?? langsung aja ke TKP..

Tutoralnya..
Seperti bisa siapkan dulu secangkir kopi Notepad++ dan Mozilla firefox atau Google Chrome,.
jika males untuk mengetik ada dua langkah jitu yaitu Copy dan Paste, ya mau gimana lagi jika malass, jika tidak mengerti resiko di tanggung penumpang.

Oke lanjut ke topik
Pertama buka Notepad++ kemudian simpan dengan nama form-pendaftaran.html (jangan salah ya gunakan format tipy HTML)
ketikkan kode berikut


<!DOCTYPE HTML>
<html>
    <head> 

       <title>Form Pendaftaran</title>
    </head>
   
    <body>  

    </body>
</html>


Keterangan :
<!DOCTYPE HTML>    : Sebagai identitas HTML5
<html> </html>               : Baris paling atas dari setiap file HTML dan sebagai tanda awal pembuatan dokumen
<head> </head>              : Informasi umum dari sebuah halaman web
<title> </title>                 : Judul halaman. Terdapat pada head
<body> </body>             : settingan atribut untuk seluruh dokumen

Membuat Judul

ketikaan kede berikut dan letakkan pada area <body> ... </body>

     <h1> Form Pendaftaran </h1>

Keterangan :
<h1>.. </h1>    : tujuannya untuk membuat header atau judul postingan (Heading 1)

jika terlalu besar bisa mengaubah dengan pilihan :
<h1> Form Pendaftaran </h1>
<h2> Form Pendaftaran </h2>
<h3> Form Pendaftaran </h3>
<h4> Form Pendaftaran </h4>
<h5> Form Pendaftaran </h5>
<h6> Form Pendaftaran </h6>   

Contoh hasilnya :

Form Pendaftaran

Form Pendaftaran

Form Pendaftaran

Form Pendaftaran

Form Pendaftaran
Form Pendaftaran

Membuat Tampilan Form


     










































Nama :
Alamat :
Tempat Lahir :
Tanggal Lahir :
Alamat Web :
E-Mail :
No. HP :



Hasilnya .. 

 
Nama :
Alamat :
Tempat Lahir :
Tanggal Lahir :
Alamat Web :
E-Mail :
No. HP :

Keterangan :
 <table> .... </table> merupakan perintah utama dalam pembuatan tabel, 
<tr> ... </tr> tag untuk membuat baris
<td> ... </td> tag untuk membuat kolom/cell
colspan merge/melebarkan kolom/cell
rowspan merge/melebarkan baris

Membuat ComboBox 
Modifikasi pada kode Tanggal lahir

                <td colspan="2">
                      <select name="hari">            
                                    <option value=1>01
                                    <option value=2>02
                                    <option value=3>03
                        </select>  
                        <select name="bln">                             
                                    <option value=1>Januari
                                    <option value=2>Februari
                                    <option valie=3>Maret
                        </select> 
                          <select name="tahun">    
                                    <option value=1991>1991
                                    <option value=1992>1992
                                    <option value=1993>1993
                        </select>
                </td>
            </tr>


Keterangan :
<select> . . . </select> : membuat menu dropdown
value : variabel



 Membuat Radio Button
 Radio digunakan untuk mentukan pilihan berdasarkan check. tambahkan kode berikut diabahnya Tanggal Lahir
             <tr>
                <td>Jenis Kelamin </td>
                 <td> : </td>
                 <td>  </td>
                <td><input type = "radio" name = "gendor"  value ="Male" />Male</td> 

            </tr>
            <tr>
                <td> </td>
                 <td> : </td>
                 <td>  </td>
                <td><input type = "radio" name = "gendor"  value ="Female" />Female</td> 

            </tr>

Contoh hasilnya ..


Tanggal Lahir :
Jenis Kelamin :
Male

:
Female


Membuat Menu Submit dan Reset
tambahkan kode berikut diatasnya </table>

            <tr>
                <td></td>
                 <td></td>
                 <td></td>
                <td ><input type = "Submit" value="Submit" >

                <input type = "reset" value="Reset"></td>
            </tr>




dan inilah hasilnya...


Menambahkan Gambar
cari kode <form> dan letakkan kode berikut tepat di bawahnya..

       <table align="right">
            <tr>
                <td>  <img alt="Rhaomlie" height="300" src="rhaomlie.jpg" width="200" />
            </tr>
            <tr>
            <td align="center"><b>Mohammad Ramli</b></td>
            </tr>
            <tr>
            <td align="center"><i>1310651201</i></td>
            </tr>
            <tr>
            <td align="center"><u>http://Rhaomlie.Blogspot.com</u></td>
            </tr>
    </table>

Keterangan :
kode untuk menambahkan gambar hanyalah kode ini :
<img alt="Rhaomlie" height="300" src="rhaomlie.jpg" width="200" />

warna hijau = nama gambar
height = tinggi gambar
widht = lebar gambar


Modifikasi Background
Mengubah warna bacground :
cari kode <body> ubah kode seperti berikut, tambahkan kode bgcolor="#99FF00" pada <body>.
contohnya : <body bgcolor="#99FF00"> 

Menyisipkan gambar Backgroud
Siapkan gambar backgroud terlebih dahulu misal nama gambar green.jpg
maka tambahkan kode background="green.jpg" setelah kode diatas.
hasilnya seperti ini :
<body bgcolor="#99FF00" background="green.jpg">

Finishh......



Hasil Ahir, kili gambar untuk memperbesar.



untuk mendownload kode full, silahkan klik tautan di bawah ini...

>>>>>>DOWNLOAD<<<<<<




Sekian tutorial dari saya, apabila sobat ingin mengcopas artikel ini jangan lupa untuk menyertakan refrensinya..


refrensi : http://rhaomlie.blogspot.com/2015/03/tutorial-membuat-form-pendaftaran-dengan-HTML.html




Thursday, February 26, 2015

Membuat Form Pendaftaran menggunakan HTML


Assalamualaikum wr wb..
Selamat malam sahabat kreatif, kali ini saya membagikan tutorial membuat form Pendaftaran menggunakan HTML. Bahan yang perlukan hanyalah secangkir kopi Notepad++ dan Browser Mozilla atau bisa menggunakan yang lain.

oke langsung saja ini gambaran hasilnya..


Nama : Mohammad Ramli
NIM : 1310651201
Rhaomlie Form Pendaftaran

Form Pendaftaran

Nama :
Alamat :
: Desa
: Kec.
: Kota
: Prov
: Zip
Tempat Lahir :
Tanggal Lahir :
Jenis Kelamin : Male
: Female
Alamat Web :
E-Mail :
No. HP :



Tutorialnya..

Buka Notepad++
Ketikkan kode berikut pada notepad++

<!DOCTYPE HTML>
<html>
    <head>
        <title>Judul</title>
    </head>
   
    <body>

    </body>
</html>


lalu simpan dalam format nilai.html

Keterangan :
<!DOCTYPE HTML>      : merupakan tag untuk menggunakan HTML 5.
<html> ... </html>   : merupakan tag pembuka dari dokumen html.
<head> ... </head>   :
<title> ... </title> : merupakan tag untuk memberikan judul pada dokumen html.
<body> ... </body>   : merupakan body dari dokumen html. Segala sesuatu yang ingin
ditampilkan di dokumen html disimpan dalam tag body ini.


selanjutnya beri warna pada background letakkan  dalam <body>
<body bgcolor="#99FF00"> 


 Tambahkan Kode berikut kedalam  <body> ....  </body>





Form Pendaftaran






























































































Nama :
Alamat :
: Desa
: Kec.
: Kota
: Prov
: Zip
Tempat Lahir :
Tanggal Lahir :




Jenis Kelamin : Male
: Female
Alamat Web :
E-Mail :
No. HP :







Keterangan :
<h1> .... </h1> : ini adalah text format yang di gunakan untuk judul, untuk penggunaanya seperti contoh di bawah ini

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>


hasilnya :

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
Membuat Form dan Tabel
<form> .... </form>   : Membuat form
<table> .... </table> : membuat tabel
<tr> ....</tr>                    : membuat banyaknya baris
<td> .... </td>                  : membuat banyaknya kolom
colspan               :menyatukan beberapa kolom tabel
rowspan                                      : meyatukan beberapa basir pada tabel


Membuat Combobox
  
                   <select name="bln">                                  
                                    <option value=1>Januari
                                    <option value=2>Februari
                                    <option value=3>Maret
                                    <option value=4>April
                                    <option value=5>Mei
                   </select> / 



hasilnya :




Membuat Radio Button 


<tr>
                <td>Jenis Kelamin </td>
                 <td>: </td>
                 <td></td>
                <td><input name="gendor" value="Male" type="radio">Male</td>
 </tr>
<tr>
                <td></td>
                 <td>: </td>
                 <td></td>
                <td><input name="gendor" value="Female" type="radio">Female</td>
  </tr>
hasilnya :

Jenis Kelamin : Male
: Female


keterangan : 
name di samakan agar saat memilih pilihan yang kedua tanda centang bisa berpindah

Menyisipkan Gambar Pada From
pertama siaplan dulu gambarnya..
karena untuk bisa di lihat secara online ya harus di upload dulu gambarnya..
jika sudah copy link url-nya, misal https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-8bYilBCGOAOq4DhmqF53E6aYCARt8Q-8ukrrheUPEBMG3FjpDyFKAFg1KJE6POK1ZozeZVlweUbe8i1qHyDNTSBfnYc17TCcIZabuTQmfsevG8MCzJUInaS4nTUdHW-NX4BTsO-iYFuA/s1600/rhaomlie.jpg 
jika ofline tempatkan gambar dan file.html dalam satu folder link url ganti dengan rhaomlie.jpg

<img alt="rhaomlie" height="150" src="link url" width="100" />

Keterangan :
height = Tinggi gambar
width = Lebar gambar




wez beres selesai tutorialnya..

jika masih bingung langsung download aja Surcode dalam bentuk html