DEV Community

S. M. Ahad Ali Chowdhury
S. M. Ahad Ali Chowdhury

Posted on

Create a contact page api with Laravel

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 here

if(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)