Thursday, February 20, 2014

Tutorial Desain Web (Membuat Web Simple Upload dan Download File dengan PHP MySQL)

Tutorial Desain Web (Membuat Web Simple Upload dan Download File dengan PHP MySQL) - Oke, pada kesempatan kali ini saya akan membuat sebuah website untuk Upload dan Download File dengan PHP dan MySQL. Dimana nantinya User bisa melakukan Upload file di menu Upload, dan kemudian file yang di Upload bisa di Download pada menu Download.
Beberapa fitur yang akan dibuat adalah:
§  User bisa Upload
§  User bisa Download
§  Pembatasan pada ektensi file yang bisa di Upload, hanya bisa Upload file dengan ekstensi doc, docx, xls, xlsx, ppt, pptx, pdf, rar, zip (bisa dirubah)
§  Pembatasan file size 1 MB (bisa dirubah)
Dan berikut ini adalah screenshot dari file-file yang akan dibuat

Oke, langsung saja mulai ke tutorialnya.
Pertama seperti biasanya buat dahulu sebuah database di phpMyAdmin. Disini saya membuat database dengan namatutorial, kemudian Dumping kode SQL di bawah ini
Kode SQL
MySQL
1
2
3
4
5
6
7
8
9
10
DROP TABLE IF EXISTS `download`;
CREATE TABLE `download` (
  `id` int(11) NOT NULL auto_increment,
  `tanggal_upload` date NOT NULL,
  `nama_file` varchar(100) NOT NULL,
  `tipe_file` varchar(10) NOT NULL,
  `ukuran_file` varchar(20) NOT NULL,
  `file` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
);

Database dan Table sudah dibuat, sekarang kita buat dahulu script untuk melakukan koneksi ke database.Atau bisa juga dengan meng-Import file database.sql yang sudah disertakan pada file download di bawah halaman ini.
Buat file baru dan beri nama config.php, dan kodenya seperti di bawah ini:
config.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
//koneksi ke database
mysql_connect("localhost", "root", "root");
mysql_select_db("tutorial");

//fungsi untuk mengkonversi size file
function formatBytes($bytes, $precision = 2) {
    $units = array('B', 'KB', 'MB', 'GB', 'TB');

    $bytes = max($bytes, 0);
    $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
    $pow = min($pow, count($units) - 1);

    $bytes /= pow(1024, $pow);

    return round($bytes, $precision) . ' ' . $units[$pow];
}
?>
Nah, dari kode di atas kita sudah bisa melakukan koneksi ke database, jangan lupa mengedit detail koneksi ke database milik anda sendiri.
Dan juga dari kode di atas, dibuat sebuah fungsi untuk mengkonversi file size dari file yang di upload nantinya.
Sekarang saatnya buat file yang pertama yaitu index.php. dan berikut ini isi kodenya:
index.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <title>Simple Upload dan Download File</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="container">
        <div id="header">
            <h1>Simple Upload dan Download File</h1>
            <span>Dibuat oleh Pino @tutorialweb.net</span>
        </div>

        <div id="menu">
            <a href="index.php" class="active">Home</a>
            <a href="upload.php">Upload</a>
            <a href="download.php">Download</a>
        </div>

        <div id="content">
            <h2>Home</h2>
            <p>Selamat Datang!</p>
            <p>Web Simple Download dan Upload File ini dibuat oleh <strong>TUTORIALWEB.NET</strong>. Anda bisa mempublikasikan ulang, atau merubah Source Code web ini. Jangan lupa untuk mengunjungi <a href="http://www.tutorialweb.net/" target="_blank">TUTORIALWEB.NET</a> untuk tutorial-tutorial pemrograman lainnya.</p>
        </div>
    </div>

</body>
</html>
Dalam file index.php ini tidak ada yang spesial, hanya salam perkenalan saja
Selanjutnya buat file baru dengan nama upload.php, dan isi kodenya seperti di bawah ini
upload.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
    <title>Simple Upload dan Download File</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="container">
        <div id="header">
            <h1>Simple Upload dan Download File</h1>
            <span>Dibuat oleh Pino @tutorialweb.net</span>
        </div>

        <div id="menu">
            <a href="index.php">Home</a>
            <a href="upload.php" class="active">Upload</a>
            <a href="download.php">Download</a>
        </div>

        <div id="content">
            <h2>Upload</h2>
            <p>Upload file Anda dengan melengkapi form di bawah ini. File yang bisa di Upload hanya file dengan ekstensi <b>.doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf, .rar, .zip</b> dan besar file (file size) maksimal hanya 1 MB.</p>

            <?php
            include('config.php');
            if($_POST['upload']){
                $allowed_ext    = array('doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf', 'rar', 'zip');
                $file_name        = $_FILES['file']['name'];
                $file_ext        = strtolower(end(explode('.', $file_name)));
                $file_size        = $_FILES['file']['size'];
                $file_tmp        = $_FILES['file']['tmp_name'];

                $nama            = $_POST['nama'];
                $tgl            = date("Y-m-d");

                if(in_array($file_ext, $allowed_ext) === true){
                    if($file_size < 1044070){
                        $lokasi = 'files/'.$nama.'.'.$file_ext;
                        move_uploaded_file($file_tmp, $lokasi);
                        $in = mysql_query("INSERT INTO download VALUES(NULL, '$tgl', '$nama', '$file_ext', '$file_size', '$lokasi')");
                        if($in){
                            echo '<div class="ok">SUCCESS: File berhasil di Upload!</div>';
                        }else{
                            echo '<div class="error">ERROR: Gagal upload file!</div>';
                        }
                    }else{
                        echo '<div class="error">ERROR: Besar ukuran file (file size) maksimal 1 Mb!</div>';
                    }
                }else{
                    echo '<div class="error">ERROR: Ekstensi file tidak di izinkan!</div>';
                }
            }
            ?>

            <p>
            <form action="" method="post" enctype="multipart/form-data">
            <table width="100%" align="center" border="0" bgcolor="#eee" cellpadding="2" cellspacing="0">
                <tr>
                    <td width="40%" align="right"><b>Nama File</b></td><td><b>:</b></td><td><input type="text" name="nama" size="40" required /></td>
                </tr>
                <tr>
                    <td width="40%" align="right"><b>Pilih File</b></td><td><b>:</b></td><td><input type="file" name="file" required /></td>
                </tr>
                <tr>
                    <td>&nbsp;</td><td>&nbsp;</td><td><input type="submit" name="upload" value="Upload" /></td>
                </tr>
            </table>
            </form>
            </p>
        </div>
    </div>

</body>
</html>
File ini akan membuat Form untuk Upload File dan juga Proses untuk Upload File.Dan sekarang buat file lagi dan beri nama download.php, dan isi kodenya seperti di bawah ini
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
    <title>Simple Upload dan Download File</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div id="container">
        <div id="header">
            <h1>Simple Upload dan Download File</h1>
            <span>Dibuat oleh Pino @tutorialweb.net</span>
        </div>

        <div id="menu">
            <a href="index.php">Home</a>
            <a href="upload.php">Upload</a>
            <a href="download.php" class="active">Download</a>
        </div>

        <div id="content">
            <h2>Download</h2>
            <p>Silahkan download file yang sudah di Upload di website ini. Untuk men-Download Anda bisa mengklik Judul file yang di inginkan.</p>

            <p>
            <table class="table" width="100%" cellpadding="3" cellspacing="0">
                <tr>
                    <th width="30">No.</th>
                    <th width="80">Tgl. Upload</th>
                    <th>Nama File</th>
                    <th width="70">Tipe</th>
                    <th width="70">Ukuran</th>
                </tr>
                <?php
                include('config.php');
                $sql = mysql_query("SELECT * FROM download ORDER BY id DESC");
                if(mysql_num_rows($sql) > 0){
                    $no = 1;
                    while($data = mysql_fetch_assoc($sql)){
                        echo '
                        <tr bgcolor="#fff">
                            <td align="center">'.$no.'</td>
                            <td align="center">'.$data['tanggal_upload'].'</td>
                            <td><a href="'.$data['file'].'">'.$data['nama_file'].'</a></td>
                            <td align="center">'.$data['tipe_file'].'</td>
                            <td align="center">'.formatBytes($data['ukuran_file']).'</td>
                        </tr>
                        ';
                        $no++;
                    }
                }else{
                    echo '
                    <tr bgcolor="#fff">
                        <td align="center" colspan="4" align="center">Tidak ada data!</td>
                    </tr>
                    ';
                }
                ?>
            </table>
            </p>
        </div>
    </div>

</body>
</html>
Dalam file download ini akan menampilkan sebuah Table yang berisi file-file yang telah di upload, dan akan ada link untuk men-Download file tersebut.
Untuk mempercantik tampilannya, di bawah ini adalah kode CSS-nya, dan simpan dengan nama style.css.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
@charset "utf-8";
/* CSS Document */

body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    background-color:#eee;
    margin:0;
    padding:0;
}

h1, h2, h3 {
    margin:0;
    padding:0;
}

#container {
    width:500px;
    margin:20px auto;
    padding:10px;
    background-color:#fff;
    box-shadow:0px 0px 3px #000;
}

#header {
    text-align:center;
}

#menu {
    text-align:center;
    margin:15px 0px;
    border-top:1px solid #CCC;
    border-bottom:1px solid #CCC;
}

    #menu a {
        display:inline-block;
        padding:5px 10px;
        text-decoration:none;
        color:#000;
        font-weight:bold;
    }

        #menu a:hover {
            background-color:#CCC;
        }

        #menu a.active {
            background-color:#CCC;
        }

.table, th, td {
    border-collapse:collapse;
    border:1px solid #ccc;
}

    .table th {
        background-color:#CCC;
    }

.error {
    border:1px solid #FF8080;
    background-color:#FFCECE;
    padding:3px;
    margin:5px 0px;
    text-align:center;
}

.ok {
    border:1px solid #80FF80;
    background-color:#CFC;
    padding:3px;
    margin:5px 0px;
    text-align:center;
}
Nah, sudah selesai. Jangan lupa za untuk Rate, Like dan Share artikel ini. Kalau mau download file yang sudah jadi bisa di bawah ini.
Diposkan oleh di

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)