DEV Community

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

Posted on

2 1

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

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️