Laravel로 연락처 페이지 API 만들기

1단계
마이그레이션을 만듭니다. 이를 위해 코드 편집기 터미널로 이동하여 다음을 작성하십시오.
php artisan make:마이그레이션 contactMigration
이 명령은 새 파일을 만듭니다. 이 파일로 이동하여 up() 함수에 이 코드를 작성합니다.

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');
});
}

그런 다음 다시 코드 편집기 터미널로 이동하여 다음 명령을 실행합니다. php artisan migrate

1단계 완료.

2단계

모델 만들기
php artisan make:Model contactModel(모델 이름) 코드 편집기 터미널에서 이 명령을 실행합니다. 이 명령은 파일을 만듭니다. 이 파일에 아래와 같이 코드를 작성합니다.

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;
};

2단계 완료.

3단계:
컨트롤러 생성
php artisan make:Controller contactController(컨트롤러 이름)
컨트롤러를 만든 후,
이 컨트롤러에서 데이터베이스에 데이터를 삽입하기 위한 연락처 모델을 가져옵니다. 처럼
App\Models\contactModel 사용;

그리고

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;
}
}

3단계 완료.

4단계:
이 데이터는 클라이언트 사이트에서만 사용됩니다. 이것이 우리가 route>api.php로 이동하는 이유입니다.
새 경로 만들기

Route::post("/getContactDetails", {contactController::class, 'getContactDetails'});

또한 api.php 상단에 있는 contactcontroller 클래스 경로를 가져와야 합니다.

이를 위해 App\Http\Controllers\contactController를 사용합니다.

4단계 완료.

5단계:

클라이언트 코드로 이동하여 연락처 페이지로 이동합니다.
이름, 모바일 및 메시지 옵션에 대한 상태를 만듭니다. 처럼:

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);
}

이 양식을 제출하기 위해. onSubmit 함수를 만듭니다. 처럼:

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

}

5단계 완료.

이 작업을 완료.....
행복한 코딩