step No-1
Create a migration . For this go to the code editor terminal and write
php artisan make:Migration contactMigration
this command create a new file. go to this file and write this code in up() function like that
public function up()
{
Schema::create ('contact', function (Blueprint $table){
$table->bigIncrements('id');
$table->string('name');
$table->string('mobile');
$table->string('message', 1000);
$table->string('contact_date');
$table->string('contact_time');
});
}
after that, again go to the code editor terminal and run this command: php artisan migrate
step 1 completed.
Step No-2
create model
php artisan make:Model contactModel(your model name) run this command in your code editor terminal.this command create a file. write code like below in this file
class contactModel extends Model
{
public $table='contact';
public $primaryKey='id';
protected $fillable = ['name', 'mobile', 'message',
'contact_date', 'contact_time'];
public $incrementing=true;
public $keyType='int';
public $timestamps=false;
};
step No 2 completed.
step No-3:
create controller
php artisan make:Controller contactController(your Controller name)
after make controller,
in this controller import contactmodel for inserting data in database . Like
use App\Models\contactModel;
and then
class contactController extends Controller
{
function getContactDetails(Request $request){
$name = $request->input('name');
$mobile= $request->input('mobile');
$message= $request->input('message');
date_default_timezone_set("Asia/Dhaka");
$contact_time = date("h:i:sa");
$contact_date= date("d-m-Y");
$result = contactMode::insert([
"name"=> $name,
"mobile"=> $mobile,
"message"=> $message,
"contact_date"=> $contact_date,
"contact_time"=> $contact_time,
]);
return $result;
}
}
step No 3 done.
Step No-4:
this data use only for client site. that's why we go to the route>api.php and than
create new route
Route::post("/getContactDetails", {contactController::class, 'getContactDetails'});
and also you should import the contactcontroller class path in top of the api.php.
for this use App\Http\Controllers\contactController;
step No 4 done.
step No 5:
Go to client code and go to the contact page.
Create a state for name, mobile and message option. like:
this.state={
name: "",
mobile:"",
message:""
}
Then we should have to create a onChange for the input value. onChange function like that:nameOnChange=(event)=>{
let name = event.target.value;
this.setState(name:name);
}
mobileOnChange=(event)=>{
let mobile = event.target.value;
this.setState(mobile: mobile);
}
messageOnChange=(event)=>{
let message= event.target.value;
this.setState(message: message);
}
For submitting this form. We create a onSubmit function. Like:
onsubmit=(event)=>{
let name = this.state.name;
let mobile= this.state.mobile;
let message= this.state.message;
//if we want to create some regex for this three input field.
we implement this in new file like regex.js file.
then create condition hereif(expression) { //code here} else{ let myFormData = new FormData(); myFormData.append("name", name); myFormData.append("mobile", mobile); myFormData.append("message", message); axios.get(url.getContactDetails, myFormData) .then(function(response)=>{ if(response.status==200 && response.data==1){ alert("ok"); }else{ alert("error");//we can use react toast dependency for nice view } }) .catch(function(err){ alert(err);//we can use react toast dependency for nice view }); } event.preventDefault();
}
step No 5 done.
done this work.....
Happy coding
Top comments (0)