pemrograman internet

Tugas Proyek Akhir Semester

Pemrograman Internet

CLOUDY DRIVE

APLIKASI PENYIMPANAN FILE VIA CLOUD COMPUTING

Oleh :

Mafatikhul Ilmi

1203121023

TEKNIK TELEKOMUNIKASI

DEPARTEMEN ELKTRO

POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

CLOUDY DRIVE

APLIKASI PENYIMPANAN FILE VIA CLOUD COMPUTING

I. TUJUAN Tujuan dari pembuatan aplikasi ini untuk memenuhi tugas proyek akhir dari mata

kuliah Pemrograman Internet serta sebagai upaya untuk mengetahui tingkat pemahaman

mahasiswa terhadap mata kuliah Pemrograman Internet.

II. DASAR TEORI

II.1 HTML (Hypertext Markup Language)

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang

digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di

dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis

dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan

dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah

HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia

penerbitan dan percetakan yang disebut denganSGML (Standard Generalized Markup

Language), HTML adalah sebuah standar yang digunakan secara luas untuk

menampilkan halaman web. HTML saat ini merupakan standar Internet yang

didefinisikan dan dikendalikan penggunaannya oleh World Wide Web

Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee

Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga

penelitian fisika energi tinggi di Jenewa).

Hyper Text Markup Language (HTML) merupakan protokol yang

digunakan untuk mentransfer data atau document dari web server ke

browser kita (Internet Explorer, Netscape Navigator, NeoPlanet, dll).

HTML inilah yang memungkinkan Anda menjelajah internet dan

melihat halaman web yang menarik.

Sekarang ini di pasaran terdapat banyak sekali HTML authoring

(software yang digunakan untuk membuat atau mendesain halaman

web). Macromedia Dreamweaver, Adobe GoLive, MS FrontPage

sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya Anda

http://id.wikipedia.org/wiki/World_Wide_Web_Consortium

http://id.wikipedia.org/wiki/World_Wide_Web_Consortium

http://id.wikipedia.org/wiki/Internet

http://id.wikipedia.org/wiki/SGML

http://id.wikipedia.org/wiki/Halaman_web

http://id.wikipedia.org/wiki/ASCII

http://id.wikipedia.org/wiki/Penjelajah_web

http://id.wikipedia.org/wiki/Bahasa_markah

tidak akan memperoleh hasil yang maksimal. Mengapa ? Karena

walaupun software-software tersebut semakin menawarkan

kemudahan dalam membuat halaman web, tetapi biasanya seseorang

masih perlu untuk mengedit halaman web tersebut secara manual.

Terutama untuk halaman web yang sangat kompleks.

II.1.1 Struktur dasar HTML

HTML (Hypert Text Markup Language) merupakan bahasa

pemrograman yang digunakan dalam pembuatan halaman web.

Dalam penggunaannya sebagian besar kode HTML tersebut harus

terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan

diakhiri dengan </namatag> (terdapat tanda "/"). Sebuah halaman

web minimal mempunyai empat buat tag, yaitu : <HTML> Sebagai

tanda awal dokumen HTML. <HEAD> Sebagai informasi page header.

Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX,

LINK, SCRIPT, STYLE & META. <TITLE> Sebagai titel atau judul

halaman. Kalimat yang terletak di dalam tag ini akan muncul pada

bagian paling atas browser Anda (pada title bar).

Contoh :

<TITLE>Tips HTML -- www.klik-kanan.com</TITLE><BODY> Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.Atribut :BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK, LEFTMARGIN & TOPMARGIN.Contoh :<BODY bgcolor="#000000" background="images/pcb.gif" text="#FFFFFF" link="#FF0000" vlink="FFFF00" alink="#0000FF">Sebuah contoh sederhana dokumen HTML :<HTML><HEAD><TITLE>Halaman pembuka</TITLE></HEAD><BODY bgcolor="#FFFFFF" background="images/gambar1.gif" text="#FF0000">Letakkan text, images, dan link Anda di sini</BODY></HTML>

II.2 CSS (Cascading Stylesheet)

II.2.1 Pengertian CSS :

Fitur untuk membuat dynamic HTML.

Style sheet mendeskripsikan bagaimana tampilan document

HTML di layar (template)

Membuat special efek (mendefinisikan style untuk <H1> dengan

style bold dan italic dan berwarna biru)

Mendukung ke semua browser.

II.2.2 Aturan penulisan :

Nilai untuk property tidak boleh dalam tanda petik.

contoh : color : green;

Nama property bersifat case sensitive.

color : green

property : color

value : Green

II.2.3 Cara penggunaan CSS :

External Style Sheet

Bentuk :

<link rel=“stylesheet” type=“text/css” href=“css_files.css”>

dimana :

<link, merupakan tag pembuka diakhiri dengan tanda “>”

rel=“stylesheet”, menerangkan halaman ini akan dikenai efek

style sheet

type=“text/css”, file yang dipanggil berupa css

href=“css_files.css”, alamat dokumen stylesheet yang dipanggil

Internal Style Sheet

Bentuk umum :

<style type=“text/css”>

…definisi style…

</style>

Inline Style sheet

Inline Stylesheet dituliskan di dalam property html secara

langsung.

II.3 PHP (Hypertext Preprocessor) dan MYSQL

PHP merupakan akronim dari ”PHP : Hypertext Presprocessor”. PHP merupakan

bahasa script yang biasa digunakan untuk web development yang dapat diselipkan dalam

HTML. Berbeda dengan script-script lainnya seperti Java Script atau VB script, PHP

dieksekusi di lingkungan server, client hanya menerima hasil dari script yang telah

dieksekusi, tanpa bisa mengetahui kode yang digunakan.

PHP difokuskan pada scripting server-side, jadi Anda dapat melakukan apa yang

bisa dilakukan CGI dengan menggunakan PHP seperti mengambil data inputan

form,meng-generate konten halaman dinamis, mengirim dan menerima cookies dan

masih banyak lagi. Kemampuan dan supportnya untuk database juga sangat dapat

diandalkan. Sekarang ini, PHP bahkan dikembangkan untuk menjadi bahasa

pemrograman. Untuk lebih jelasnya, Anda dapat mencari informasi lebih lanjut di distro-

distro Linux keluaran baru.

Awalnya, PHP bekerja di lingkungan Linux, karena merupakan ’turunan’ bahasa

PEARL yang merupakan bahasa pemrograman native di lingkungan Linux dan Unix.

Namun seiring perkembangan dan kebutuhan maka PHP dibuat secara cross platform.

PHP dapat bekerja di lingkungan Windows maupun Linux. PHP mengeksekusi server

script lebih cepat dari server script manapun. PHP menempati ranking pertama dalam hal

kecepatan eksekusi, diikuti oleh ASP dan JSP.

II.4 TUTORIAL WEB HOSTING

Agar supaya suatu web dapat di akses oleh banyak orang maka

suatu web perlu di hosting. Berikut ini adalah tutorial cara mengupload

web :

1. Buat akun di www.000webhost.com

a. Buka www.000webhost.com

b. Lalu selanjutnya klik Button Sign Up yang berada disebelah kanan untuk

memulai daftar.

c. kalo sudah nanti akan muncul seerti gambar berikut :

https://satyainform.wordpress.com/2012/10/03/cara-daftar-hosting-di-000webhost/www.000webhost.com

https://satyainform.wordpress.com/2012/10/03/cara-daftar-hosting-di-000webhost/www.000webhost.com

apabila berhasil nanti tampilanya seerti ini :

2. Login dengan akun yang telah anda buat sebelumnya

Ketika sudah berhasil login akan terlihat tampilan seperti berikut :

3. Klik Go to Cpanel

4. Untuk memulai Membuat MySQL database ser ta PHP my admin (scroll lah

sampai halaman seperti gambar berikut menjadi nampak) , anda bisa

menggunakan menu yang telah saya lingkari dengan warna merah berikut :

5. Lalu berikut adalah cara menghost /mengupload file PHP, HTML,

JavaScript , gambar , dll di000webhost .com, perhatikan bagian yang telah

saya tandai dengan warna biru (FileManager), kliklah bagian tersebut :

6. Berikut adalah tampilan file manager

7. Untuk memulai mengupload file silahkan untuk mengklik public_html

8. Selanjutnya, untuk memulai mengupload f ile silahkan untuk mengklik

"Upload"

9. Tekan tombol "browse" untuk memulai memilih file yang hendak diupload

dari komputer anda.

10. Jika sudah, dan ingin memulai mengupload f ile. . .silakan untuk mengklik

tombol dengan gambar "Centang"

11. Jika sudah, klik gambar back untuk kembali ke halaman public_html

12. Sekarang and sudah bisa menggunakan 000webhost .com sebagai tempat

hosting dengan baik.

III. HASIL PERCOBAAN Pada bagian ini akan dibahas mengenai sintak-sintak penyusun web mulai dari tag

html hingga koneksi database menggunakan php. Program dibagi menjadi beberapa sub

bagian yaitu index.php, login.php, logout.php, upload.php, delete.php, connect.php,

doc.php. Berikut adalah penjelasan masing-masing sub program.

III.1 Index.phpIndex.php merupakan halaman utama dari web yang disusun dalam proyek akhir ini.

Berikut adalah sintak penyusun indeks.php :

<?php session_start();if(!isset($_SESSION['login_user']) || (trim($_SESSION['login_user']) == '')){header( "Location: login.php" );}?>

Sintak di atas merupakan sebuah session yang digunakan untuk menyimpan

username yang diinputkan melalui form login untuk mengidentifikasi user yang sedang

aktif. Program di atas menunjukkan ketika tidak terdapat user yang login maka program

akan kembali ke halaman login, sehingga dapat dikatakan bahwa halaman indeks hanya

bisa di akses oleh user yang telah memiliki account yang telah tersimpan pada database.

Output program :

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container">  <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <img src="img/emblem2.png" style="float:left; padding:2px;"><a class="navbar-brand" href="#">Cloudy Drive</a> </div>

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" style="float:right;"> <li class="ses-name"> <?php echo $_SESSION['login_user']; ?></li> <li><a href="logout.php">Logout</a></li> </ul> </div>  </div>  </nav>

Sintak di atas merupakan navigasi bar yang terdiri dari session sebagai identifikasi user

yang sudah berhasil login dan tombol navigasi logout.

Output program :

<div class="row"> <div class="col-lg-12"> <h2 class="page-header">UPLOAD <small>Your data here !</small> </h2> <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="uploaded_file" id="uploaded_file"><span class="space"> </span>

Username yang teridentifikasi oleh session

<input class="btn btn-primary btn-lg" type="submit" value="Upload" name="submit"> </form> </div> </div>

Program di atas difungsikan untuk proses upload data ke dalam database melalui web.

Output program :

<div class="container">

 <div class="row"> <div class="col-lg-12"> <h2 class="page-header">Your Cloud <small>Check This Out !</small> </h2> </div> <div class="col-lg-4 col-sm-6 text-center"> <a href="doc.php?view=doc"> <img class="img-circle img-responsive img-center item pic1" alt=""></a> <h3>Document</h3> <p>Write down every information and keep it safe with Cloudy Drive ! </p> </div> <div class="col-lg-4 col-sm-6 text-center"> <a href="doc.php?view=img"> <img class="img-circle img-responsive img-center item pic2" alt=""> </a> <h3>Photo </h3> <p>Placed every moment you have and keep it safe with Cloudy Drive !</p> </div> <div class="col-lg-4 col-sm-6 text-center"> <a href="doc.php?view=musik"><img class="img-circle img-responsive img-center item pic3" alt=""></a> <h3>Music</h3> <p>Record every second your special moment and keep it safe with Cloudy Drive !</p> </div> </div> <hr>

Program di atas merupakan contain dari indek.php, dimana dalam contain terdapat

pembagian jenis data/file yang di upload.

Output program :

III.2 Login.php

Login.php merupakan halaman yang akan pertama kali ditampilkan ke webbrowser

dimana pada halaman ini user harus memasukkan username dan password agar bisa

mengakses halaman index.php. Berikut adalah sintak penyusunnya :

<!DOCTYPE html><html lang="en"><head><title>Login</title>

<link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/login.css" rel="stylesheet"><link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"></head>

<body><div class="container"> <div class="pic"> <img src="img/15 Computer functions circle icons.png"> </div> <div class="formbox"> <div class="emblem"><img src="img/emblem.png"></div> <form class="form-signin" action="login.php" method="post"> <input type="email" name="username" class="form-control" placeholder="Email address" required autofocus> <input type="password" name="password" class="form-control" placeholder="Password" required> <input class="btn btn-lg btn-primary btn-block customsubmit" type="submit" value="Login"> </form> </div></div> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script></body></html>

Output program :

<?phpsession_start(); // Starting Session$error=''; // Variable To Store Error Messageif (isset($_POST['username']) && isset($_POST['password'])) {if (empty($_POST['username']) || empty($_POST['password'])) {$error = "Username or Password is invalid";}else{// Define $username and $password$id_user=$_POST['id'];$username=$_POST['username'];$password=$_POST['password'];echo $username;// Establishing Connection with Server by passing server_name,

user_id and password as a parameter$connection = mysql_connect("localhost", "root", "");// To protect MySQL injection for Security purpose$username = stripslashes($username);$password = stripslashes($password);$username = mysql_real_escape_string($username);$password = mysql_real_escape_string($password);// Selecting Database$db = mysql_select_db("cloudydrive", $connection);// SQL query to fetch information of registerd users and finds user

match.$query = mysql_query("select * from member where pswd='$password' AND

username='$username'", $connection);$rows = mysql_num_rows($query);$res=mysql_fetch_assoc($query);if ($rows == 1) {

$_SESSION['login_user']=$username; // Initializing Session

$_SESSION['id_user']=$res['id_user'];header("location: index.php"); // Redirecting To Other Page} else {$error = "Username or Password is invalid";}mysql_close($connection); // Closing Connection}} ?>

Session di atas berfungsi untuk mengolah variable yang diinputkan melalui form login.

Ketika form login mendapatkan sebuah input data berupa username dan password maka

session akan mengidentifikasi apakah username dan password sama dengan data account

yang sudah terdaftar dalam database. Ketika username dan password yang dimasukkan

tidak sama dengan username dan password yang ada dalam database maka akan muncul

notifikasi “username and password invalid !” dan akan redirect ke halaman login.php.

Namun ketika username sudah teridentifikasi dan sama seperti yang terdapat dalam

database maka program akan redirect ke index.php.

III.3 Upload.php

Upload.php merupakan program php yang berfungsi untuk mengirimkan file menuju

database. Program ini mengidentifikasi jenis file yang diupload serta mengklasifikasikan

file berdasarkan jenisnya. Dalam program ini ukuran file juga di batasi hingga 20 MB

sehingga ketika file yang di upload melebihi 20 MB maka file akan gagal terupload.

<?phpinclude 'connect.php';

if(isset($_FILES['uploaded_file'])){ $errors= array(); $file_name = $_FILES['uploaded_file']['name']; $file_size =$_FILES['uploaded_file']['size']; $file_tmp =$_FILES['uploaded_file']['tmp_name']; $file_type=$_FILES['uploaded_file']['type']; @$file_ext=strtolower(end(explode('.',$_FILES['uploaded_file']['name']))); $extensions = array("jpeg","jpg","png","docx","doc","pdf","pptx","xlsx","mp4","mp3","wav"); if(in_array($file_ext,$extensions )=== false){ $errors[]="extension not allowed, please choose correct file."; } if($file_size > 20097152){ $errors[]='File size must be excately 20 MB'; } if(empty($errors)==true){

if($file_ext=="jpeg" || $file_ext=="jpg" || $file_ext=="png"){ move_uploaded_file($file_tmp,"files/images/".$file_name);

}elseif($file_ext=="doc" ||$file_ext=="docx" || $file_ext=="pdf"

|| $file_ext=="xlsx" || $file_ext=="pptx"){ move_uploaded_file($file_tmp,"files/document/".$file_name);

}elseif($file_ext=="mp4" || $file_ext=="mp3" ||

$file_ext=="wav"){ move_uploaded_file($file_tmp,"files/musik/".$file_name);

} $stat=mysql_query("INSERT INTO file (name, type, size) VALUES ('$file_name', '$file_ext', $file_size)");

echo "succes"; }else{ print_r($errors); }}

III.4 Delete.php

Program delete.php difungsikan untuk menghapus data yang terdapat dalam

database melalui tampilan web, sehingga file yang sudah tidak dibutuhkan dapat dihapus.

Berikut adalah sintak dari program delete.php :

<?phpif(isset($_REQUEST['id'])){$dbhost = 'localhost';$dbuser = 'root';$dbpass = '';$conn = mysql_connect($dbhost, $dbuser, $dbpass);if(! $conn ){ die('Could not connect: ' . mysql_error());}

$id = $_REQUEST['id'];

$sql = "DELETE FROM file WHERE id = $id" ;

mysql_select_db('cloudydrive');$retval = mysql_query( $sql, $conn );if(! $retval ){ die('Could not delete data: ' . mysql_error());}echo "Deleted data successfully\n";mysql_close($conn);}?>

Proses pendelete-an data di dasarkan pada id dari data yang sudah berhasil di upload.

Proses delete data menggunakan metode request.

III.5 Doc.php

Doc.php merupakan php yang difungsikan untuk menampilkan data yang sudah

berhasil di-upload kedalam database ke dalam tampilan web. Berikut adalah sintak dari

doc.php :

<?php//Start sessionsession_start();

//Check whether the session variable SESS_MEMBER_ID is present or notif(!isset($_SESSION['login_user']) || (trim($_SESSION['login_user']) == '')) {

header("location: index.php");exit();

}

?><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link href="css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"></head>

<body><nav class="navbar navbar-default"> <div class="container-fluid"> <ul class="nav navbar-nav " style="float:right;"> <li class="ses-name navlog"><?php echo $_SESSION['login_user']; ?></li> <li><a href="logout.php">Logout</a></li> </ul> <div class="navbar-header"> <img src="img/emblem2.png" style="float:left; padding:2px;"><a class="navbar-brand" href="#">Cloudy Drive</a> </div> </div></nav><div class="containercontent"> <h3 class="sub-header"><i class="fa fa-files-o fa-2x"></i> Your Document</h3> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th>No</th> <th>Name</th> <th>Size</th> <th>Modified</th> <th style="text-align:center">Action</th> </tr> </thead> <?php

include 'connect.php'; $filetype=$_REQUEST['view'];

if($filetype=='doc'){ $qry = "SELECT *FROM file WHERE (type='docx' || type='doc' || type='pdf' || type='pptx' || type='xlsx') && id_user='".$_SESSION['id_user']."'";

$currdir='document'; }else if($filetype=='img'){

$qry = "SELECT *FROM file WHERE type='jpg' || type='jpeg' || type='png'";

$currdir='images'; }else if($filetype=='musik'){

$qry = "SELECT *FROM file WHERE type='mp3' || type='mp4' || type='wav'";

$currdir='musik'; }

$sql = mysql_query($qry); while($row = mysql_fetch_array($sql)){ echo "<tr> <td>".$row['id']."</td> <td>".$row['name']."</td> <td>".$row['size']." byte</td> <td>".$row['created']."</td>

<td style='text-align:center'> <a href='http://localhost/PIproject/files/".$currdir."/".$row['name']."'><button class='btn btn-success btn-sm' name='submit'>Download</button></a>

<a href='delete.php?id=".$row['id']."'><button class='btn btn-danger btn-sm' name='submit'> Delete</button></a></td>

</tr>"; } mysql_close(); ?> </table> </div></div></body></html>

Output Program :

III.6 Connect.php

Connect.php difungsikan untuk mengkoneksikan web ke sebuah database. Berikut

adalah sintaknya :

<?php$conn=mysql_connect('localhost','root','');mysql_select_db('cloudydrive') or die('database error');

?>

IV. KESIMPULAN

1. Untuk proses login dan logout pada aplikasi berbasis web dapat

dilakukan dengan menggunakan fasilitas php $_SESSION. Dan

proses ini berhasil berjalan pada Aplikasi Cloudy Drive yang sudah

dirancang ini.

2. Untuk menampilkan data dari database membutuhkan query MYSQL

yaitu berupa syntax INSERT. Dan proses ini berhasil berjalan pada

Aplikasi Cloudy Drive yang sudah dirancang ini.

3. Secara keseluruhan aplikasi dapat berjalan dengan baik

menggunakan syntax-syntax yang sudah dijelaskan dan

dicantumkan pada file cource code.

V. LAMPIRAN

INDEX.PHP

<?php session_start();if(!isset($_SESSION['login_user']) || (trim($_SESSION['login_user']) == '')){header( "Location: login.php" );}?><!DOCTYPE html><html lang="en"><head><title>index</title><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/round-about.css" rel="stylesheet"><link rel="stylesheet" href="css/style.css" /></head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> 

<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <img src="img/emblem2.png" style="float:left; padding:2px;"><a class="navbar-brand" href="#">Cloudy Drive</a> </div>

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" style="float:right;"> <li class="ses-name"> <?php echo $_SESSION['login_user']; ?></li> <li><a href="logout.php">Logout</a></li> </ul> </div>  </div>  </nav>

<div class="container"><div class="row"> <div class="col-lg-12"> <h2 class="page-header">UPLOAD <small>Your data here !</small> </h2> <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="uploaded_file" id="uploaded_file"><span class="space"> </span> <input class="btn btn-primary btn-lg" type="submit" value="Upload" name="submit"> </form> </div> </div>  <div class="row"> <div class="col-lg-12"> <h2 class="page-header">Your Cloud <small>Check This Out !</small> </h2> </div> <div class="col-lg-4 col-sm-6 text-center"> <a href="doc.php?view=doc"> <img class="img-circle img-responsive img-center item pic1" alt=""></a> <h3>Document</h3> <p>Write down every information and keep it safe with Cloudy Drive ! </p> </div> <div class="col-lg-4 col-sm-6 text-center"> <a href="doc.php?view=img"> <img class="img-circle img-responsive img-center item pic2" alt=""> </a> <h3>Photo </h3> <p>Placed every moment you have and keep it safe with Cloudy Drive !</p> </div>

<div class="col-lg-4 col-sm-6 text-center"> <a href="doc.php?view=musik"><img class="img-circle img-responsive img-center item pic3" alt=""></a> <h3>Music</h3> <p>Record every second your special moment and keep it safe with Cloudy Drive !</p> </div> </div> <hr>  <footer> <div class="row"> <div class="col-lg-12"> <p>Copyright © mafailmi 2014</p> </div>  </div>  </footer></div>

 <script src="js/jquery.js"></script>

 <script src="js/bootstrap.min.js"></script></body></html>

LOGIN.PHP

<!DOCTYPE html><html lang="en"><head><title>Login</title>

<link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/login.css" rel="stylesheet"><link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"></head>

<body><div class="container"> <div class="pic"> <img src="img/15 Computer functions circle icons.png"> </div> <div class="formbox"> <div class="emblem"><img src="img/emblem.png"></div> <form class="form-signin" action="login.php" method="post"> <input type="email" name="username" class="form-control" placeholder="Email address" required autofocus> <input type="password" name="password" class="form-control" placeholder="Password" required> <input class="btn btn-lg btn-primary btn-block customsubmit" type="submit" value="Login">

</form> </div></div> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script></body></html><?phpsession_start(); // Starting Session$error=''; // Variable To Store Error Messageif (isset($_POST['username']) && isset($_POST['password'])) {if (empty($_POST['username']) || empty($_POST['password'])) {$error = "Username or Password is invalid";}else{// Define $username and $password$id_user=$_POST['id'];$username=$_POST['username'];$password=$_POST['password'];echo $username;// Establishing Connection with Server by passing server_name,

user_id and password as a parameter$connection = mysql_connect("localhost", "root", "");// To protect MySQL injection for Security purpose$username = stripslashes($username);$password = stripslashes($password);$username = mysql_real_escape_string($username);$password = mysql_real_escape_string($password);// Selecting Database$db = mysql_select_db("cloudydrive", $connection);// SQL query to fetch information of registerd users and finds user

match.$query = mysql_query("select * from member where pswd='$password' AND

username='$username'", $connection);$rows = mysql_num_rows($query);$res=mysql_fetch_assoc($query);if ($rows == 1) {

$_SESSION['login_user']=$username; // Initializing Session$_SESSION['id_user']=$res['id_user'];header("location: index.php"); // Redirecting To Other Page} else {$error = "Username or Password is invalid";}mysql_close($connection); // Closing Connection}}

?>

UPLOAD.PHP

<?phpinclude 'connect.php';

if(isset($_FILES['uploaded_file'])){ $errors= array(); $file_name = $_FILES['uploaded_file']['name']; $file_size =$_FILES['uploaded_file']['size'];

$file_tmp =$_FILES['uploaded_file']['tmp_name']; $file_type=$_FILES['uploaded_file']['type']; @$file_ext=strtolower(end(explode('.',$_FILES['uploaded_file']['name']))); $extensions = array("jpeg","jpg","png","docx","doc","pdf","pptx","xlsx","mp4","mp3","wav"); if(in_array($file_ext,$extensions )=== false){ $errors[]="extension not allowed, please choose correct file."; } if($file_size > 20097152){ $errors[]='File size must be excately 20 MB'; } if(empty($errors)==true){

if($file_ext=="jpeg" || $file_ext=="jpg" || $file_ext=="png"){ move_uploaded_file($file_tmp,"files/images/".$file_name);

}elseif($file_ext=="doc" ||$file_ext=="docx" || $file_ext=="pdf"

|| $file_ext=="xlsx" || $file_ext=="pptx"){ move_uploaded_file($file_tmp,"files/document/".$file_name);

}elseif($file_ext=="mp4" || $file_ext=="mp3" ||

$file_ext=="wav"){ move_uploaded_file($file_tmp,"files/musik/".$file_name);

} $stat=mysql_query("INSERT INTO file (name, type, size) VALUES ('$file_name', '$file_ext', $file_size)");

echo "succes"; }else{ print_r($errors); }}

DOC.PHP

<?php//Start sessionsession_start();

//Check whether the session variable SESS_MEMBER_ID is present or notif(!isset($_SESSION['login_user']) || (trim($_SESSION['login_user']) == '')) {header("location: index.php");exit();

}

?><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link href="css/bootstrap.min.css" rel="stylesheet"><link rel="stylesheet" href="css/style.css" /><link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"></head>

<body><nav class="navbar navbar-default">

<div class="container-fluid"> <ul class="nav navbar-nav " style="float:right;"> <li class="ses-name navlog"><?php echo $_SESSION['login_user']; ?></li> <li><a href="logout.php">Logout</a></li> </ul> <div class="navbar-header"> <img src="img/emblem2.png" style="float:left; padding:2px;"><a class="navbar-brand" href="#">Cloudy Drive</a> </div> </div></nav><div class="containercontent"> <h3 class="sub-header"><i class="fa fa-files-o fa-2x"></i> Your Document</h3> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th>No</th> <th>Name</th> <th>Size</th> <th>Modified</th> <th style="text-align:center">Action</th> </tr> </thead> <?php include 'connect.php'; $filetype=$_REQUEST['view']; if($filetype=='doc'){

$qry = "SELECT *FROM file WHERE (type='docx' || type='doc' || type='pdf' || type='pptx' || type='xlsx') && id_user='".$_SESSION['id_user']."'";

$currdir='document'; }else if($filetype=='img'){

$qry = "SELECT *FROM file WHERE type='jpg' || type='jpeg' || type='png'";

$currdir='images'; }else if($filetype=='musik'){

$qry = "SELECT *FROM file WHERE type='mp3' || type='mp4' || type='wav'";

$currdir='musik'; }

$sql = mysql_query($qry); while($row = mysql_fetch_array($sql)){ echo "<tr> <td>".$row['id']."</td> <td>".$row['name']."</td> <td>".$row['size']." byte</td> <td>".$row['created']."</td>

<td style='text-align:center'> <a href='http://localhost/PIproject/files/".$currdir."/".$row['name']."'><button class='btn btn-success btn-sm' name='submit'>Download</button></a>

<a href='delete.php?id=".$row['id']."'><button class='btn btn-danger btn-sm' name='submit'> Delete</button></a></td>

</tr>"; } mysql_close(); ?> </table> </div>

</div></body></html>

DOC.PHP

<?phpif(isset($_REQUEST['id'])){$dbhost = 'localhost';$dbuser = 'root';$dbpass = '';$conn = mysql_connect($dbhost, $dbuser, $dbpass);if(! $conn ){ die('Could not connect: ' . mysql_error());}

$id = $_REQUEST['id'];

$sql = "DELETE FROM file WHERE id = $id" ;

mysql_select_db('cloudydrive');$retval = mysql_query( $sql, $conn );if(! $retval ){ die('Could not delete data: ' . mysql_error());}echo "Deleted data successfully\n";mysql_close($conn);}?>

CONNECT.PHP

<?php$conn=mysql_connect('localhost','root','');mysql_select_db('cloudydrive') or die('database error');?>

LOGOUT.PHP

<?phpsession_start();

if(isset($_SESSION['login_user']) || (trim($_SESSION['login_user']) != '')){session_unset();session_destroy();header( "Location: login.php" );}else{header( "Location: index.php" );}?>

DATABASE

TABLE FILE

TABLE MEMBER

http://infotek.comuf.com/PIProject/login.php

http://infotek.comuf.com/PIProject/index.php

http://infotek.comuf.com/PIProject/doc.php?view=doc

Education

pemrograman internet