Clock

Khmer Web

Gateway to web application
ការបង្កើត​ Form
Edit

មុន​នឹង​អាច​បញ្ចូល​ទិន្នន័យ​ទៅ​ក្នុង​មូលដ្ឋាន​ទិន្នន័យ​នៅ​លើ​ server បាន យើង​ចាំបាច់​ត្រូវ​បង្កើត form ឬ​ទំរង់​បែបបទ​ជាមុន​សិន ដោយ​ធ្វើ​ដូច​ខាង​ក្រោម​នេះ៖ 

#c:\bottle\app.py
from bottle import route, run, static_file

from controllers import index
 
@route('/')
def main():
  kargs = {"title":"RENTAL BICYCLE"}
  return index.render(**kargs)

@route('/static/scripts/<filename>')    
def server_static(filename):
  return static_file(filename, root='./public/scripts')

@route('/static/styles/<filename>')    
def server_static(filename):
  return static_file(filename, root='./public/styles')

@route('/static/images/<filename>')    
def server_static(filename):
  return static_file(filename, root='./public/images')

@route('/static/fonts/<filename>')    
def server_static(filename):
  return static_file(filename, root='./public/fonts')

run(host='localhost', port=9000, debug=True, reloader=True)


<!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  	<title>{{data['title']}}</title>
    
    
    
    
  </head>
  
  <body>
	
  </body>
</html>

//c:\bottle\public\scripts\main.js
class Bicycle{
  constructor(){
    
  }
  
  showBicycle(){
    var html = '
BICYCLES
'
    $("#table").html(html)
  }

  addBicycle(){
    $("#bikeform").css({"visibility":"visible"})
  }

  bicycleForm(){
    var brand = $('#bikeform').find('input[name="fbrand"]').val()
    var country = $('#bikeform').find('input[name="fcountry"]').val()
    var year = $('#bikeform').find('input[name="fyear"]').val()
    var amount = $('#bikeform').find('input[name="famount"]').val()
    var price = $('#bikeform').find('input[name="fprice"]').val()

    if((brand == "") || (country == "") || (year == "") || (amount == "") || (price == "")){
      return false
    }else{
      var numberRGEX = /^(?:[1-9]\d*|0)?(?:\.\d+)?$/
      var intRGEX = /^[0-9]+$/
      var numberResult = numberRGEX.test(price)
      var intResult = (intRGEX.test(year) && intRGEX.test(amount))
      if(!numberResult)
        return false
      if(!intResult)
        return false
    }
  }
}//End of class

bicycle = new Bicycle()

/*c:\bottle\public\styles\main.css*/
#site{
  width:700px;
  background:lightgrey;
  margin:30px auto;
  padding:20px;
}
#site-title{
  letter-spacing: 2px;
}
#menu{
  background:black;
  margin:20px 0;
}
#menu a{
  padding:10px;
  text-decoration:none;
  color:white;
  display:inline-block;
}
#menu a:hover{
  color:grey;
  cursor:pointer;
}
#content{
  position:relative;
}
.add-data{
  margin-bottom:20px;
}
.add-data input{
  float:right;
}
#bikeform{
  visibility:hidden;
  width:40%;
  margin:0 auto;
  displaY:grid;
  grid-template-columns:20% 80%;
  grid-gap:10px 5px;
  background:grey;
  padding:10px 15px 10px 10px;
  position:absolute;
  top:30px;
  left:50%;
  transform:translateX(-50%);
}
#bikeform a{
  text-align:right;
}