Create a contact page api with Laravel
Published: 2022-06-12 17:41:43

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