[trick] konsep upload file dengan php mysql dan extjs

bismillah

kali ini gw coba share konsep upload file dengan php mysql dan extjs :

1. dynamic.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Forms</title>
 <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

<!-- GC -->
 <!-- LIBS -->
 <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
 <!-- ENDLIBS -->

<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript" src="states.js"></script>
 <script type="text/javascript" src="form.js"></script>
 <script type="text/javascript" src="file-upload.js"></script>
 <link rel="stylesheet" type="text/css" href="forms.css"/>

<!-- Common Styles for the examples -->
 <link rel="stylesheet" type="text/css" href="examples.css"/>
</head>
<div id="mytraditionalform"></div>
<body>
</body>
</html>

2.form.js

Ext.onReady(function(){
 var simple = new Ext.form.FormPanel({
 standardSubmit: true,
 frame:true,
 title: 'Register',
 width: 550,

 defaults: {width: 230},
 defaultType: 'textfield',
 items: [{
 fieldLabel: 'NIM',
 name: 'nim',
 allowBlank:false
 },
 {
 fieldLabel: 'Nama',
 name: 'nama',
 allowBlank:false
 },
 {
 fieldLabel: 'Kelas',
 name: 'kelas',
 allowBlank:false
 },
 {
 fieldLabel: 'Alamat',
 name: 'alamat',
 xtype: 'textarea',
 allowBlank:false
 },
 {
 fieldLabel: 'Tanggal',
 name: 'tanggal',
 xtype: 'datefield',
 disabledDays:[0,6]

 },
 {

 xtype : 'htmleditor',
 name : 'keterangan',
 hideLabel : true,
 height : 100,
 anchor : '100%'
 },
 {
 fieldLabel: 'Foto',
 name: 'foto',
 inputType: 'file',
 allowBlank:false
 },
 {
 inputType: 'hidden',
 id: 'submitbutton',
 name: 'myhiddenbutton',
 value: 'hiddenvalue'
 }
 ],
 buttons: [{
 text: 'Submit',
 handler: function() {
 simple.getForm().getEl().dom.action = 'save.php';
 simple.getForm().getEl().dom.method = 'POST';
 simple.getForm().getEl().dom.enctype = 'multipart/form-data';
 simple.getForm().submit();
 }
 }]
 });
 simple.render('mytraditionalform');
});

3. save.php


<?php
$npm = $_POST["nim"];
$nama = $_POST["nama"];
$kelas = $_POST["kelas"];
$alamat = $_POST["alamat"];
$tanggal = $_POST["tanggal"];
$keterangan = $_POST["keterangan"];
$lokasi_file=$_FILES['foto']['tmp_name'];
$nama_file=$_FILES['foto']['name'];

move_uploaded_file($lokasi_file,"$nama_file");

echo "NIM kamu ".$npm."<br/>";
echo "Nama kamu ".$nama."<br/>";
echo "Kamu kelas ".$kelas."<br/>";
echo "Alamat kamu di ".$alamat."<br/>";
echo "Tanggal kamu di ".$tanggal."<br/>";
echo "Keterangan kamu di ".$keterangan."<br/>";
echo "File kamu di ".$lokasi_file."<br/>";

echo "File kamu di ".$nama_file."<br/>";

?>

untuk tampilan kira-kira seperti ini >>

rifki
download sorcecode disini

Leave a comment

1 Comment

  1. Well, you would have to create an INSERT query in your upload.php. The way I usually do this is to link the file by it’s ID in the table.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: