1674011993
Table of Contents:
00:00 CRUD with Blazor in .NET 7 ๐ฅ
01:35 Create a Service (utilizing the Repository Pattern & Dependency Injection)
07:35 Implement the GetProducts() Method
10:38 Get all Products on the Products Page
15:51 Use the life cycle method OnInitializedAsync()
17:22 Get a single Product by Id
19:47 Create the Product Page
27:34 Add an EditForm to create or update a product
34:11 Add Create Button to Products Page
36:05 Implement Create & Update in the ProductService
40:58 Delete Implementations
๐ป GitHub: https://github.com/patrickgod/BlazorCrudDotNet7
#dotnet #crud #blazor
1673545440
If youโre looking to store and manage data efficiently and effectively, then MarkLogic Database is an excellent choice. It allows you to easily write CRUD operations (Create, Read, Update, Delete) within the database in order to keep your data organized and secure. In this article weโll discuss how you can write CRUD operations with MarkLogic Database so that you make the most of your data storage solution.
CRUD is an acronym for Create, Read, Update, and Delete. It is a common set of operations are performing on data in a database. In MarkLogic, CRUD operation using the built-in REST API for performing operations.
Create: To create data in MarkLogic, simply POST to the /v1/documents endpoint. The body of the POST request should contain the document you want to create. MarkLogic will automatically generate a unique ID for the document and return it in the response.
Read: To read data from MarkLogic, use the GET method on the /v1/documents endpoint. You can specify which documents you want to retrieve by including their IDs in the query string. The response will contain the requested documents in JSON format.
Update: To update a document in MarkLogic, use the PUT method on the /v1/documents endpoint. The body of the PUT request should contain the updated document. The ID of the document is includes in the URL path.
Delete: To delete a document from MarkLogic, use the DELETE method on the /v1/documents endpoint. The ID of the document includes in the URL path.
MarkLogic is a powerful, flexible and scalable NoSQL database. It supports a wide range of features including full-text search, geospatial search, indexing, aggregation, bitemporal data and more. You can write CRUD operations in MarkLogic using the Java API, REST API or one of the many language bindings.
In this article weโll focus on writing CRUD operations using the Java API. Weโll assume that you have a basic understanding of Java and the MarkLogic API. If youโre not familiar with either then we recommend checking out our other articles on getting started with MarkLogic and Java.
DatabaseClient client = DatabaseClientFactory.newClient("localhost", 8011,
"Documents");
Once you have a DatabaseClient instance you can start writing CRUD operations. The most common operation is probably creating documents. Using the DocumentManager class we can do it.
// Create a new document manager
DocumentManager docMgr = client.newDocumentManager();
// Create a new JSON document
String json = "{\"name\": \"John Smith\", \"age\": 25}";
// Write the document to the database
docMgr.write("/documents/example1.json", new InputStreamHandle
MarkLogic is a powerful document-oriented database that supports a wide range of query languages, including its own proprietary language, Query Language (QL). In this article, weโll take a look at how to write CRUD operations using QL.trg
Create: To create a new document in MarkLogic, we use thexdmp:document-insert function. This function takes two arguments: the first is the URI of the new document, and the second is the XML content insert. For example, to insert a new document with the URI โ/user/1โ and XML content โJohn Smith25โ, we would use the following code:
xdmp:document-insert("/user/1",
"John Smith25")
Retrieve: To retrieve a document from MarkLogic, we use the xdmp:document-get function. This function takes one argument, which is the URI of the document for retrieved. For example, to retrieve the document with URI โ/user/1โ, we would use the following code:
xdmp:document-get("/user/1")
Update: To update an existing document in MarkLogic, we use the xdmp:document-update function.
Delete: To delete a document in MarkLogic, we use the xdmp:document-delete function.This function takes one argument, which is the URI of the document for deleted. For example, to retrieve the document with URI โ/user/1โ, we would use the following code:
xdmp:document-delete("/user/1")
SQL (Structured Query Language) is a standard database query language use to manage data stored in relational databases. MarkLogic Query Language (MQL) is a proprietary query language, it designs specifically for use with the MarkLogic NoSQL database.
While SQL is a widely-used and well-understood query language, it is not well suited for use with NoSQL databases like MarkLogic. MQL, on the other hand, was designed specifically for use with MarkLogic and provides a number of features and capabilities that are not available in SQL.
In this article, weโll take a look at the basic syntax of MQL and how it can to write CRUD operations against a MarkLogic database.
When you are ready to send data to the server using REST API, you need to use a POST request. In the body of your POST request, you will need to include the following:
{
"id": 1,
"name": "John Doe",
"email": "john@example.com"
}
{
"name": "Jane Smith",
"email": "jane@example.com" // id is not included because it will be
generated by the server // name and email are the only required fields
for this resource
}
In conclusion, writing CRUD operations for MarkLogic Database is not a difficult task but requires some knowledge and understanding of the technology. By following this tutorial, you have learned how to write your own custom CRUD operations with MarkLogic Database and can now take advantage of its powerful features. With its high performance capabilities, scalability options and rich feature set, MarkLogic Database is an ideal choice for those looking to build robust applications that need reliable data management solutions.
For more functions check this :
https://docs.marklogic.com/xdmp
Original article source at: https://blog.knoldus.com/
1672715880
for RESTful APIs built with NestJs
We believe that everyone who's working with NestJs and building some RESTful services and especially some CRUD functionality will find @nestjsx/crud
microframework very useful.
๐ Super easy to install and start using the full-featured controllers and services ๐
๐ DB and service agnostic extendable CRUD controllers
๐ Reach query parsing with filtering, pagination, sorting, relations, nested relations, cache, etc.
๐ญ Framework agnostic package with query builder for a frontend usage
๐พ Query, path params and DTOs validation included
๐ฌ Overriding controller methods with ease
๐ง Tiny config (including globally)
๐ Additional helper decorators
โ๏ธ Swagger documentation
@Crud()
decorator for endpoints generation, global configuration, validation, helper decorators (docs)RequestQueryBuilder
class for a frontend usage and RequestQueryParser
that is being used internally for handling and validating query/path params on a backend side (docs)TypeOrmCrudService
with methods for CRUD database operations (docs)Any support is welcome. At least you can give us a star โญ
Built with ๐ by @MichaelYali and Contributors
Author: Nestjsx
Source Code: https://github.com/nestjsx/crud
License: MIT license
1671012360
CRUD (Create, Read, Update, and Delete) is a basic requirement when working with database data.
In this tutorial, I show how you can select, insert, update, and delete a record from the MySQL database in the CodeIgniter 4 project.
In the example, I am creating a page to add a new subject and list subjects with the edit and delete buttons.
.env
file which is available at the project root.NOTE โ If dot (.) not added at the start then rename the file to .env.
database.default.hostname
, database.default.database
, database.default.username
, database.default.password
, database.default.DBDriver
, database.default.DBPrefix
, and database.default.port
.database.default.hostname = 127.0.0.1
database.default.database = codeigniterdb
database.default.username = root
database.default.password = root
database.default.DBDriver = MySQLi
database.default.DBPrefix =
database.default.port = 3306
subjects
using migration.php spark migrate:create create_subjects_table
app/Database/Migrations/
folder from the project root.create_subjects_table
and open it.up()
method.down()
method delete subjects
table which calls when undoing migration.<?php namespace App\Database\Migrations;
use CodeIgniter\Database\Migration;
class CreateSubjectsTable extends Migration
{
public function up() {
$this->forge->addField([
'id' => [
'type' => 'INT',
'constraint' => 5,
'unsigned' => true,
'auto_increment' => true,
],
'name' => [
'type' => 'VARCHAR',
'constraint' => '100',
],
'description' => [
'type' => 'TEXT',
'null' => true,
],
]);
$this->forge->addKey('id', true);
$this->forge->createTable('subjects');
}
//--------------------------------------------------------------------
public function down() {
$this->forge->dropTable('subjects');
}
}
php spark migrate
Subjects
Model โphp spark make:model Subjects
app/Models/Subjects.php
file.$allowedFields
Array specify field names โ ['name','description']
that can be set during insert and update.Completed Code
<?php
namespace App\Models;
use CodeIgniter\Model;
class Subjects extends Model {
protected $DBGroup = 'default';
protected $table = 'subjects';
protected $primaryKey = 'id';
protected $useAutoIncrement = true;
protected $insertID = 0;
protected $returnType = 'array';
protected $useSoftDeletes = false;
protected $protectFields = true;
protected $allowedFields = ['name','description'];
// Dates
protected $useTimestamps = false;
protected $dateFormat = 'datetime';
protected $createdField = 'created_at';
protected $updatedField = 'updated_at';
protected $deletedField = 'deleted_at';
// Validation
protected $validationRules = [];
protected $validationMessages = [];
protected $skipValidation = false;
protected $cleanValidationRules = true;
// Callbacks
protected $allowCallbacks = true;
protected $beforeInsert = [];
protected $afterInsert = [];
protected $beforeUpdate = [];
protected $afterUpdate = [];
protected $beforeFind = [];
protected $afterFind = [];
protected $beforeDelete = [];
protected $afterDelete = [];
}
app/Config/Routes.php
file.Completed Code
$routes->get('/', 'SubjectsController::index');
$routes->get('subjects/create', 'SubjectsController::create');
$routes->post('subjects/store', 'SubjectsController::store');
$routes->get('subjects/edit/(:num)', 'SubjectsController::edit/$1');
$routes->post('subjects/update/(:num)', 'SubjectsController::update/$1');
$routes->get('subjects/delete/(:num)', 'SubjectsController::delete/$1');
SubjectsController
Controller โphp spark make:controller SubjectsController
app/Controllers/SubjectsController.php
file.Subjects
Model.subjects
table and assign in $data['subjects']
. Load subjects/index
view and pass $data
.subjects/create
view for adding a new subject.subjects
table.Read POST values. If 'submit'
is POST then define validation. If values are not validated then return to the subjects/create
view with the error response.
If values are validated then insert a record in the subjects
table. If a record is successfully inserted then store the success message in session()->setFlashdata('message')
and class name in session()->setFlashdata('alert-class')
and return to the subjects/create
route.
Similarly, if a record is not inserted then store the failed message in session()->setFlashdata('message')
and class name in session()->setFlashdata('alert-class')
and return to the subjects/create
route.
subjects
table by $id
and assign in $data['subject']
. Load subjects/edit
view and pass $data
.subjects
table.Read POST values. If 'submit'
is POST then define validation. If values are not validated then return to the edit view with the error response.
If values are not validated then redirect to the edit view with the error response. Select a record from the subjects
table by $id
and assign in $subject
.
If values are validated then update a record by $id
. If a record is successfully inserted then store the success message in session()->setFlashdata('message')
and class name in session()->setFlashdata('alert-class')
and return to the /
route.
Similarly, if a record is not inserted then store the failed message in session()->setFlashdata('message')
and class name in session()->setFlashdata('alert-class')
and return to the subjects/edit
route.
subjects
table by $id
.Check $id
record exists in the subjects
table. If exists then delete the record by $id
and store the success message in session()->setFlashdata('message')
and class name in session()->setFlashdata('alert-class')
,
Similarly, if a record is not deleted then store the failed message in session()->setFlashdata('message')
and class name in session()->setFlashdata('alert-class')
.
Return to the /
route.
Completed Code
<?php namespace App\Controllers;
use App\Controllers\BaseController;
use App\Models\Subjects;
class SubjectsController extends BaseController
{
public function index(){
$subjects = new Subjects();
## Fetch all records
$data['subjects'] = $subjects->findAll();
return view('subjects/index',$data);
}
public function create(){
return view('subjects/create');
}
public function store(){
$request = service('request');
$postData = $request->getPost();
if(isset($postData['submit'])){
## Validation
$input = $this->validate([
'name' => 'required|min_length[3]',
'description' => 'required'
]);
if (!$input) {
return redirect()->route('subjects/create')->withInput()->with('validation',$this->validator);
} else {
$subjects = new Subjects();
$data = [
'name' => $postData['name'],
'description' => $postData['description']
];
## Insert Record
if($subjects->insert($data)){
session()->setFlashdata('message', 'Added Successfully!');
session()->setFlashdata('alert-class', 'alert-success');
return redirect()->route('subjects/create');
}else{
session()->setFlashdata('message', 'Data not saved!');
session()->setFlashdata('alert-class', 'alert-danger');
return redirect()->route('subjects/create')->withInput();
}
}
}
}
public function edit($id = 0){
## Select record by id
$subjects = new Subjects();
$subject = $subjects->find($id);
$data['subject'] = $subject;
return view('subjects/edit',$data);
}
public function update($id = 0){
$request = service('request');
$postData = $request->getPost();
if(isset($postData['submit'])){
## Validation
$input = $this->validate([
'name' => 'required|min_length[3]',
'description' => 'required'
]);
if (!$input) {
return redirect()->route('subjects/edit/'.$id)->withInput()->with('validation',$this->validator);
} else {
$subjects = new Subjects();
$data = [
'name' => $postData['name'],
'description' => $postData['description']
];
## Update record
if($subjects->update($id,$data)){
session()->setFlashdata('message', 'Updated Successfully!');
session()->setFlashdata('alert-class', 'alert-success');
return redirect()->route('/');
}else{
session()->setFlashdata('message', 'Data not saved!');
session()->setFlashdata('alert-class', 'alert-danger');
return redirect()->route('subjects/edit/'.$id)->withInput();
}
}
}
}
public function delete($id=0){
$subjects = new Subjects();
## Check record
if($subjects->find($id)){
## Delete record
$subjects->delete($id);
session()->setFlashdata('message', 'Deleted Successfully!');
session()->setFlashdata('alert-class', 'alert-success');
}else{
session()->setFlashdata('message', 'Record not found!');
session()->setFlashdata('alert-class', 'alert-danger');
}
return redirect()->route('/');
}
}
Create a layouts
and subjects
folder at app/Views/
.
Create the following files in the folders โ
layouts/layout.php
Creating a layout. Included bootstrap CSS in the <head >
section and added some CSS.
Define 'content'
section.
Completed Code
<!doctype html>
<html>
<head>
<title>CRUD (Create Read Update Delete) in a CodeIgniter 4</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style type="text/css">
.mb20{
margin-bottom: 20px;
}
.actionbutton{
width: 100%;
height: 55px;
}
.errors{
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<?= $this->renderSection('content') ?>
</div>
</div>
</div>
</body>
</html>
subjects/index.php
Extend 'layouts.layout'
and add content between $this->section('content')
and $this->endSection()
.
Add <a >
element to open Add subject
form. Pass <?=site_url('subjects/create')?>
in href
attribute.
Display bootstrap alert message if 'message'
Session exists. Also, set alert class using 'alert-class'
Session.
Create <table >
to list records.
Loop on the $subjects
and create a row. In the last column added edit
and delete
links.
Set edit <a >
route to <?= site_url('subjects/edit/'.$subject['id']) ?>
and delete <a >
route to <?= site_url('subjects/delete/'.$subject['id']) ?>
.
Completed Code
<?= $this->extend('layouts/layout') ?>
<?= $this->section('content') ?>
<div class="actionbutton mt-2">
<a class="btn btn-info float-right mb20" href="<?=site_url('subjects/create')?>">Add Subject</a>
</div>
<?php
// Display Response
if(session()->has('message')){
?>
<div class="alert <?= session()->getFlashdata('alert-class') ?>">
<?= session()->getFlashdata('message') ?>
</div>
<?php
}
?>
<!-- Subject List -->
<table width="100%" border="1" style="border-collapse: collapse;">
<thead>
<tr>
<th width="10%">ID</th>
<th width="30%">Name</th>
<th width="45%">Description</th>
<th width="15%"> </th>
</tr>
</thead>
<tbody>
<?php
if(count($subjects) > 0){
foreach($subjects as $subject){
?>
<tr>
<td><?= $subject['id'] ?></td>
<td><?= $subject['name'] ?></td>
<td><?= $subject['description'] ?></td>
<td align="center">
<a class="btn btn-sm btn-info" href="<?= site_url('subjects/edit/'.$subject['id']) ?>">Edit</a>
<a class="btn btn-sm btn-danger" href="<?= site_url('subjects/delete/'.$subject['id']) ?>">Delete</a>
</td>
</tr>
<?php
}
}else{
?>
<tr>
<td colspan="4">No data found.</td>
</tr>
<?php
}
?>
</tbody>
</table>
<?= $this->endSection() ?>
subjects/create.php
Extend 'layouts.layout'
and add content between $this->section('content')
and $this->endSection()
.
Add <a >
element to open List
of subjects. Pass <?=site_url('/')?>
in href
attribute.
Display bootstrap alert message if 'message'
Session exists. Also, set alert class using 'alert-class'
Session.
Load validation service \Config\Services::validation()
and assign it in $validation
.
Create <form method="post">
. Set its action="<?=site_url('subjects/store')?>"
.
Create a text and textarea element for entering the subject name and description. Display error in <span >
if not validated. Also, create a submit button.
Completed Code
<?= $this->extend('layouts/layout') ?>
<?= $this->section('content') ?>
<div class="actionbutton mt-2">
<a class="btn btn-info float-right mb20" href="<?=site_url('/')?>">List</a>
</div>
<div class="row">
<h2>Add Subject</h2>
</div>
<?php
// Display Response
if(session()->has('message')){
?>
<div class="alert <?= session()->getFlashdata('alert-class') ?>">
<?= session()->getFlashdata('message') ?>
</div>
<?php
}
?>
<?php $validation = \Config\Services::validation(); ?>
<div class="row">
<div class="col-md-12">
<form action="<?=site_url('subjects/store')?>" method="post">
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" name="name" required value="<?= old('name') ?>">
<!-- Error -->
<?php if( $validation->getError('name') ) {?>
<div class='alert alert-danger mt-2'>
<?= $error = $validation->getError('name'); ?>
</div>
<?php }?>
</div>
<div class="form-group">
<label for="pwd">Description:</label>
<textarea class="form-control" name="description" required><?= old('description') ?></textarea>
<!-- Error -->
<?php if($validation->getError('description')) {?>
<div class='alert alert-danger mt-2'>
<?= $error = $validation->getError('description'); ?>
</div>
<?php }?>
</div>
<button type="submit" class="btn btn-success" name="submit">Submit</button>
</form>
</div>
</div>
<?= $this->endSection() ?>
subjects/edit.php
Extend 'layouts.layout'
and add content between $this->section('content')
and $this->endSection()
.
Add <a >
element to open List
of subjects. Pass <?=site_url('/')?>
in href
attribute.
Display bootstrap alert message if 'message'
Session exists. Also, set alert class using 'alert-class'
Session.
Load validation service \Config\Services::validation()
and assign it in $validation
.
Create <form method="post">
. Set its action="<?=site_url('subjects/update/'.$subject['id'])?>"
.
Create a text element and store $subject->name
in value
attribute. Similarly, create textarea element and store $subject->description
. Display error in <span >
is not validated. Also, create a submit button.
Completed Code
<?= $this->extend('layouts/layout') ?>
<?= $this->section('content') ?>
<div class="actionbutton mt-2">
<a class="btn btn-info float-right mb20" href="<?=site_url('/')?>">List</a>
</div>
<div class="row">
<h2>Edit Subject</h2>
</div>
<?php
// Display Response
if(session()->has('message')){
?>
<div class="alert <?= session()->getFlashdata('alert-class') ?>">
<?= session()->getFlashdata('message') ?>
</div>
<?php
}
?>
<?php $validation = \Config\Services::validation(); ?>
<div class="row">
<div class="col-md-12">
<form action="<?=site_url('subjects/update/'.$subject['id'])?>" method="post">
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" name="name" required value="<?= old('name',$subject['name']) ?>">
<!-- Error -->
<?php if( $validation->getError('name') ) {?>
<div class='alert alert-danger mt-2'>
<?= $error = $validation->getError('name'); ?>
</div>
<?php }?>
</div>
<div class="form-group">
<label for="pwd">Description:</label>
<textarea class="form-control" name="description" required><?= old('description',$subject['description']) ?></textarea>
<!-- Error -->
<?php if($validation->getError('description')) {?>
<div class='alert alert-danger mt-2'>
<?= $error = $validation->getError('description'); ?>
</div>
<?php }?>
</div>
<button type="submit" class="btn btn-success" name="submit">Submit</button>
</form>
</div>
</div>
<?= $this->endSection() ?>
php spark serve
http://localhost:8080
in the web browser.I hope this tutorial, helps you to implement CRUD in your project.
If you found this tutorial helpful then don't forget to share.
Original article source at: https://makitweb.com/
1669804920
Micronaut is an open-source JVM-based software framework for building lightweight, modular applications and microservices. It helps to create microservices with small memory footprints and quick startup time.
Letโs take a use case. We are going to create a web app with the help of Groovy and Micronaut to perform CRUD operations. For that, we have to implement the CRUD web app so that it will have all the entries of flight records. We can Add, Update, Delete and Read all the records.
You need to make sure that the following components are already installed in the system:
To create a Micronaut project just navigate to https://micronaut.io/launch/ and create your starter project.
The project structure will be as follows-
Open the build.gradle file and add the following dependencies :
// HANA DB driver. com.sap.cloud.db.jdbc:ngdbc:2.13.9 // To access the VCAP variable of the app. This will be needed to read the public key using which the JWT token will be verified. io.pivotal.cfenv:java-cfenv-boot:2.4.0 // To verify the JWT token using the public key certificate extracted using the above dependency. com.sap.cloud.security:sapjwt:1.5.27.5 // To extract the user details and the roles from the JWT token. com.sap.cloud.security:java-security:2.13.0
Create a FlightEntity class and annotate with @MappedEntity(โSFLIGHTโ)
Add entity feilds flightId, flightName, flightFrom, flightTo and flightDate where flightId field will be unique. Annotate flightId with @Id and @Column(name = 'ID') and rest of field will be annotated with @Column
Create FlightRepository Repo class
Create FlightRepository Repo class and extends CrudRepository
Create FlightController class
//Add sFlightRepository bean of FlightRepository class //Add controller method which will take FlightRepository object as a parameter @Inject FlightController(FlightRepository sFlightRepository) { this.sFlightRepository = sFlightRepository //Add some records in the table, if the table empty. if (this.sFlightRepository.findAll().isEmpty()) { this.sFlightRepository.save(new FlightEntity(flightId: 1, flightName: 'IndiGo', flightFrom: 'Mumbai', flightTo: 'Chennai', flightDate: new Date())) this.sFlightRepository.save(new FlightEntity(flightId: 2, flightFrom: 'New Delhi', flightName: 'Air India', flightTo: 'Mumbai', flightDate: new Date())) this.sFlightRepository.save(new FlightEntity(flightId: 3, flightName: 'TruJet', flightFrom: 'Agra', flightTo: 'Delhi', flightDate: new Date())) this.sFlightRepository.save(new FlightEntity(flightId: 4, flightName: 'SpiceJet', flightFrom: 'Delhi', flightTo: 'Pune', flightDate: new Date())) } } // Fetch all records Add getAll(@Nullable Principal principal) // Update particulat record of table Add update(@Body FlightEntity sFlightEntity, @PathVariable('id') String id) // Delete particulat record of table delete(@Body FlightEntity sFlightEntity, @PathVariable('id') String id) // This is for admin, he can perform the operations. operation(@Nullable @PathVariable('name') String name)
Create Main Application class
Run Application.java class
You can navigate to http://localhost:8080 , You can see the FLIGHT table is generated and is also having entries.
To add a record in a table just click on Create button
To update a record in a table just click on the update action button
To delete a record in a table just click on the delete action button
We have performed all the CRUD operations.
In this blog, we have covered the Groovy CRUD web app with the help of the Micronaut framework. Now you are ready with the understanding of the Groovy CRUD web app with the help of the Micronaut framework. For more, you can refer to the documentation: https://github.com/knoldus/groovy-crud-web-app-with-micronaut
Original article source at: https://blog.knoldus.com/
1668827955
Build a TypeScript API with Node/Express.js, RapidAPI and Xata. Create CRUD endpoints to support a job board API using TypeScript, Node/Express.js, RapidAPI Client and Xata
Are you building RESTful APIs correctly? In this videos, let's create CRUD endpoints to support a job board API using TypeScript, Node/Express.js, RapidAPI Client, and Xata. This is series where we will setup a brand new Node.js configured with TypeScript, create basic CRUD endpoints using a Xata database, and test these endpoints in the RapidAPI Client VS Code Extension.
*** Timestamps ***
00:00 - Intro
00:40 - RapidAPI Client VS Code Extension Intro
01:50 - Xata Database Intro
02:30 - Github Repository
02:50 - Setup Node.js Project with TypeScript
11:20 - Installing Types for Node
13:15 - Scaffolding an Express Application
18:00 - Creating CRUD Requests in RapidAPI Client Extension
21:00 - Test CRUD Endpoints in RapidAPI Client VS Code Extension
22:00 - Setup Database in Xata.io
24:45 - Xata Code Generation with TypeScript
29:15 - Using Xata in our Express.js CRUD Endpoints
36:25 - Wrap Up
*** Timestamps ***
00:00 Introduction
00:32 Sponsor Intros (RapidAPI and Xata)
01:47 Adding Try/Catch for Handling Errors
05:56 Defining a TypeScript Return Type
07:55 Using TypeScript Unions To Improve Our Type
09:23 Using TypeScript Generics
11:58 Defining Types the Express.js Incoming Request
13:59 Handling Not Found Error From Xata
17:02 Testing Endpoints With the RapidAPI Client Extension
19:27 Syncing Endpoints with RapidAPI Studio
20:08 Wrap Up
Rapid API Client VS Code Extension - https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client
RapidAPI Studio - https://rapidapi.com/studio
Check out Xata - https://xata.io/
*** Resources ***
Github Repository - https://github.com/jamesqquick/nodejs-api-with-rapidapi-typescript-xata
#typescript #api #expressjs #rapid #xata #node #crud
1667981342
In this Angular CRUD tutorial, I will be showing you how to build a filterable Data Table with complete CRUD(Create, Read, Update and Delete) operation using a REST API
I also show you how to load the data from a remote server REST API service called JSON Place Holder, we also added a search-filter functionality to the table using Custom Pipes in Angular, with no third-party libraries.
The table is designed using Bootstrap 5. We also made use of services in Angular, by creating endpoints from the JSON server endpoints using the inbuilt Angular Http Client.
The tutorial is beginner-friendly and easy to follow along. All you need is a basic knowledge of HTML, JavaScript and Angular.
Chapters
------------------------
0:00 - Introduction and project preview
04:39 - Create a new Angular Project
06:46 - Setup Bootstrap 5
08:08 - Import The Necessary Modules
11:25 - Implement Project Design
16:00 - Create The CRUD Endpoints
27:28 - Consume Endpoint to Get All Post
32:30 - Consume Endpoint to Create a New Post
41:47 - Consume Endpoint to Edit / Update Post
53:06 - Consume Endpoint to Delete a Post
55:43 - Implement Search Functionality
1:02:23 - Outro
Topic
------------------------
Learn Angular by Building a Filterable Data Table with CRUD Operation using a REST API
JSON placeholder Doc:
๐ https://jsonplaceholder.typicode.com
Source Code Frontend:
๐https://github.com/desoga10/ang-data-table
#angular #bootstrap #restapi #api #crud
1667979921
In this crash course, you will learn how to use React and Firebase to create a full-stack Task Manager CRUD application. Some of the things we did in this crash course include:
* Implementing CRUD functionality using the Firestore database.
* Making use of Modular imports from the Firebase API
* using Run Transaction to do Batch Write to the Firestore database
* Time Stamp in Firebase
Timestamps for (React Firebase CRUD Crash Course | Creating a Task Manager Application):
Introduction- 00:00
02:20 - Setting up Firebase/Firestore
06:18 - Create a new React App
09:15 - Folder Structure
10:26 - Firebase Installation
10:45 - Integrate Firebase Configuration Settings
14:14 - Integrating Bootstrap 5
14:54 - Designing the User Interface
24:25 - Fetching Data from Firestore
33:35 - Adding Data to Firestore
46:40 - Deleting Data from Firestore
51:09 - Update Data in Firestore
1:02:32 - Integrate Run Transaction
1:19:20 - Implement Timestamp
1:24:30 - Outro
GitHub Repo:
Starter Template: https://github.com/desoga10/task-manager-design
Complete Code: https://github.com/desoga10/task-manager-complete
#react #crud #firebase
1667212101
Microsoft-powered programming language ASP.net has several benefits compared to other popular IT languages. Many large enterprises prefer to develop their high-end software on this platform.
Over the years, many programming languages & coding platforms have been introduced by several IT leaders or developers. Those languages have done well considering their performance & adaptability.
In spite of that, ASP.net has been the favorite of thousands of developers worldwide. The big advantages that ASP.net offers make it a perfect choice to create large enterprise IT solutions that help businesses grow.
To summarize those benefits we have created an infographic that you can find down below.
Source: Infographic
1667080140
Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering, sorting, and CRUD operations.
The most popular features of Handsontable:
โ Multiple column sorting
โ Non-contiguous selection
โ Filtering data
โ Export to file
โ Validating data
โ Conditional formatting
โ Merging cells
โ Freezing rows/columns
โ Moving rows/columns
โ Resizing rows/columns
โ Hiding rows/columns
โ Context menu
โ Comments
Run the following command in your terminal
npm install handsontable
You can also use Yarn, NuGet or load the bundle directly from jsDelivr.
Create an HTML placeholder
<div id="example"></div>
Import Handsontable and its stylesheet
import Handsontable from "handsontable";
import 'handsontable/dist/handsontable.full.css';
Now turn your placeholder into a data grid with sample data.
const data = [
['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
['2019', 10, 11, 12, 13],
['2020', 20, 11, 14, 13],
['2021', 30, 15, 12, 13]
];
const container = document.getElementById('example');
const hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true
});
We provide support for developers working with commercial version via contact form or at support@handsontable.com.
If you use a non-commercial version then please ask your tagged question on StackOverflow.
Handsontable is a commercial software with two licenses available:
If you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.
If you use the free for non-commercial license of Handsontable, then pass the phrase 'non-commercial-and-evaluation'
, as described in this documentation.
Proudly created and maintained by the Handsontable Team.
Author: Handsontable
Source Code: https://github.com/handsontable/handsontable
License: View license
1666597668
Despite being commonly pronounced /krสd/
, CRUD is not a word. Itโs an abbreviation that stands for Create, Read, Update, and Delete or Destroy.
In this article, I will show you what CRUD means, and what the individual terms mean and do. I will also show you how create, read, update, and delete operations work in the real world.
CREATE
Operation and How Does it Work?READ
Operation and How Does it Work?UPDATE
Operation and How Does it Work?DELETE
Operation and How Does it Work?CRUD refers to the four basic operations a software application should be able to perform โ Create, Read, Update, and Delete.
In such apps, users must be able to create data, have access to the data in the UI by reading the data, update or edit the data, and delete the data.
In full-fledged applications, CRUD apps consist of 3 parts: an API (or server), a database, and a user interface (UI).
The API contains the code and methods, the database stores and helps the user retrieve the information, while the user interface helps users interact with the app.
You can make a CRUD app with any of the programming languages out there. And the app doesnโt have to be full stack โ you can make a CRUD app with client-side JavaScript.
In fact, the app with which I will be showing you how create, read, update and delete operations work is made with client-side JavaScript.
Each letter in the CRUD acronym has a corresponding HTTP request method.
CRUD OPERATION | HTTP REQUEST METHOD |
---|---|
Create | POST |
Read | GET |
Update | PUT or PATCH |
Delete | DELETE |
CREATE
Operation and How Does it Work?In CRUD, the create operation does what the name implies. It means creating an entry. This entry could be an account, user information, a post, or a task.
As I pointed out earlier, the HTTP protocol that implements a CREATE
operation is the POST method.
In a SQL database, to create is to INSERT
. In a NoSQL database like MongoDB, you create with the insert()
method.
In a user interface, this GIF below shows how the CREATE
operation works:
READ
Operation and How Does it Work?The READ
operation means getting access to the inputs or entries in the UI. That is, seeing it. Again, the entry could be anything from user information to social media posts, and others.
This access could mean the user getting access to the created entries right after creating them, or searching for them. Searching is implemented to allow the user to filter out the entries they donโt need.
The HTTP protocol that implements a READ
operation is the GET method.
In a SQL database, to read is to SELECT
an entry. In a NoSQL database like MongoDB, you read with the find()
or findById()
method.
UPDATE
Operation and How Does it Work?UPDATE
is the operation that allows you to modify existing data. That is, editing the data.
Unlike READ
, the UPDATE
operation alters the existing data by making changes to it.
PUT and PATCH are the HTTP protocols with which you can implement an UPDATE
operation, depending on what you need.
PUT
should be used when you want the entire entry updated, and PATCH if you donโt want the entire entry to be modified.
In a SQL database, you use UPDATE
to update an entry. In a NoSQL database like MongoDB, you can implement an update feature with the findByIdAndUpdate()
method.
In a user interface, this GIF below shows how the UPDATE
operation works:
DELETE
Operation and How Does it Work?To delete is to get rid of an entry from the UI and the database.
DELETE
is the HTTP protocol for implementing a DELETE
operation.
In a SQL database, DELETE
is used to delete an entry. In a NoSQL database like MongoDB, you can implement delete with the findByIdAndDelete()
method.
This article showed you what CRUD means and what each individual operation in a CRUD app does.
You can think about CRUD in this way:
CREATE
READ
UPDATE
DELETE
Original article source at https://www.freecodecamp.org
#crud #programming
1666597334
When interacting with a database or working with an API, you'll often encounter the term CRUD. It is a popular acronym for the four basic operations or functions that a model (in the case of an API) or a database management system uses.
This is an acronym everyone learning computer programming will come across, and it's good to get familiar with what it means.
In this article, you will learn what each part of the acronym means, what the CRUD operators do, and how they relate to databases and API.
CRUD is an acronym for Create, Read, Update and Delete. Each of these performs different operations, but they all aim to track and manage data, from a database, API, or whatever.
When creating a database or building APIs, you will want users to be able to manipulate any data available either by fetching these data, updating the data, deleting them, or adding more data. These operations are made possible through CRUD operations.
These operations have functions in Databases, as you can map them to a standard Structured Query Language (SQL) statement. Also, these operations can be mapped to a Hypertext Transfer Protocol (HTTP) method when working with RESTful APIs.
In SQL, the Create operation can be mapped to the INSERT function the same as the POST method in an HTTP request. Here is a table to summarize what each CRUD operation can be mapped to an HTTP request and SQL function:
LETTER | OPERATION | HTTP REQUEST | SQL FUNCTION |
---|---|---|---|
C | Create | POST | INSERT |
R | Read | GET | SELECT |
U | Update | PATCH/ PUT (if you have id or uuid ) | UPDATE |
D | Delete | DELETE | DELETE |
With some examples, let's now understand how these acronyms work with SQL and HTTP requests.
Just as its name suggests, you use the create operation to create a new record or entry. This record can be a user's data, a new item, information, or a new row to be added to your database.
For example, let's say you have a database or an array of users which consists of each user's name, age, username, password, and unique ID. You can add a new user to the database or list of users (this is referred to as a new record or entry).
When working with SQL, this is mapped to the INSERT function. A simple UPDATE function will look like this:
INSERT INTO table_name (column1, column2, column3, ...)
VALUES (value1, value2, value3, ...);
In the above, you match the new values to their respective column via their name using the INSERT function. You can also tweak this, but the emphasis is the INSERT function.
When working with RESTful APIs, you will use the POST HTTP methods. For example, let's use the JavaScript Fetch API:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((json) => console.log(json));
In the above example, a new object containing the title
, body
and userId
of the new post
is added to the [posts](https://jsonplaceholder.typicode.com/posts)
API. The server should return a header with the HTTP response code 201 (CREATED).
You use the Read operation to read an entire database or search for one or more entries based on certain parameters.
For example, if you have a database of users, you can retrieve the entire list of users or get a particular user...or anything you want. The idea of retrieving can be referred to as READing.
When working with SQL, this is mapped to the SELECT function. A simple SELECT function will look like this:
SELECT * FROM menu;
In the above, you are selecting all the data in the menu table. You can also request specific values via their column names:
SELECT CustomerID, FirstName, LastName, Email, PhoneNumber
FROM Customer
You can also use parameters and lots more, but the emphasis is that you will always use the SELECT function.
When working with RESTful APIs, you will use the GET HTTP method. Although most times, you don't need to specify the method as it is the default method, for example, when using the JavaScript Fetch API:
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((json) => console.log(json));
When there are no errors, this will return the JSON data from the API, along with a 200 response code representing OK. If there is an error, it will often return a 404 response code (NOT FOUND).
You use the Update operation to modify existing data. This is just like editing the data. Maybe you want to correct the spelling of a name from Jon Doe to John Doe.
When working with SQL, this is mapped to the UPDATE function. A simple UPDATE function will look like this:
UPDATE user
SET user_name = 'John Doe', age = 62
WHERE item_id = 1;
The request above will change the name and age of the specified user id
.
When working with RESTful APIs, you will use either the PUT or PATCH HTTP methods.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
body: JSON.stringify({
id: 1,
title: 'foo',
body: 'bar',
userId: 1,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((json) => console.log(json));
This will return a response with a Status Code of 200 (OK) if the operation is successful.
As you must have guessed, you use this operation to delete a specified entry or record. This is the direct opposite of the Create operation, but for this, you will specify the ID (unique value) you wish to remove.
When working with SQL, this is mapped to the DELETE function. A simple DELETE function will look like this:
DELETE FROM user WHERE user_name='John Doe';
This will remove the row with the name "John Doe" from the table. If you want to delete all the records from the table, you can use the following:
DELETE FROM user;
When working with RESTful APIs, then you will make use of the DELETE method:
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE',
});
If successful, this should return a response code of 204 (NO CONTENT).
In this tutorial, you have learned what each operation in the CRUD acronym means, what they do, and how they work with SQL and HTTP requests.
In summary, C represents Create and is used to create a new entry. R represents Read and is used to read and retrieve entries. U represents Update and updates an entry. D represents Delete and is used to delete an entry.
Thanks for reading, and have fun coding!
Original article source at https://www.freecodecamp.org
#crud #api #database #programming #developer
1666160645
Eel is a little Python library for making simple Electron-like offline HTML/JS GUI apps, with full access to Python capabilities and libraries.
https://github.com/ChrisKnott/Eel
Install
pip install eel
C:\python_dev\crud>pip install eel
Install PyAutoGUI
https://pypi.org/project/PyAutoGUI/
pip install PyAutoGUI
C:\python_dev\crud>pip install PyAutoGUI
Create Database sqlite3 using python
//createdb.py
import sqlite3
from sqlite3 import Error
def create_connection(db_file):
""" create a database connection to a SQLite database """
conn = None
try:
conn = sqlite3.connect(db_file)
print(sqlite3.version)
except Error as e:
print(e)
finally:
if conn:
conn.close()
if __name__ == '__main__':
create_connection(r"C:\python_dev\crud\views\database\storage.db")
run
C:\python_dev\crud>python createdb.py
Create Database Table
CREATE TABLE tblemployee (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name VARCHAR (150),
position VARCHAR (150),
office VARCHAR (150)
);
#main.py
import eel
from views.models.employee import showallrecords, save_newemployee, show_selectedEmployee, update_newemployee, show_deleteEmployee
import pyautogui #https://pypi.org/project/PyAutoGUI/
eel.init('views')
@eel.expose
def fetchalldata():
select_reg = showallrecords()
eel.action_out(select_reg)
@eel.expose
def btn_save(name, position, office):
msg = save_newemployee(name, position, office)
eel.save_return(str(msg))
@eel.expose
def get_employee(id):
select_employee = show_selectedEmployee(id)
eel.action_edit(select_employee)
@eel.expose
def btn_update(name, position, office, id):
msg = update_newemployee(name, position, office, id)
eel.update_return(str(msg))
@eel.expose
def get_delete_employee(id):
select_del_employee = show_deleteEmployee(id)
eel.delete_return(select_del_employee)
eel.start(
'templates/index.html',
size=pyautogui.size()
)
#employee.py
import sqlite3
def showallrecords():
try:
connect = sqlite3.connect("views/database/storage.db")
cursor = connect.cursor()
cursor.execute("SELECT * FROM tblemployee")
registers = []
for item in cursor.fetchall():
#test = item[1]
#print(test)
registers.append(item)
return registers
except Exception as error:
print(error)
msg = "Error"
return msg
def save_newemployee(name, position, office):
try:
connect = sqlite3.connect("views/database/storage.db")
cursor = connect.cursor()
if name != "" and position != "" and office != "":
cursor.execute("INSERT INTO tblemployee(name, position, office) VALUES(?,?,?)",(name, position, office))
connect.commit()
connect.close()
msg = "success"
return msg
else:
msg = "failure"
return msg
except Exception as Error:
print(Error)
msg = "failure"
return msg
def show_selectedEmployee(id):
try:
connect = sqlite3.connect("views/database/storage.db")
cursor = connect.cursor()
cursor.execute("SELECT * FROM tblemployee WHERE id =?", (id,))
editemployees = []
for item in cursor.fetchone():
editemployees.append(item)
return editemployees
except Exception as error:
print(error)
msg = "Error"
return msg
def update_newemployee(name, position, office, id):
try:
connect = sqlite3.connect("views/database/storage.db")
cursor = connect.cursor()
if name != "" and position != "" and office != "":
cursor.execute("UPDATE tblemployee SET name =?, position =?, office =? WHERE id =?",
(name, position, office, id,))
connect.commit()
connect.close()
msg = "success"
return msg
else:
msg = "failure"
return msg
except Exception as Error:
print(Error)
msg = "failure"
return msg
def show_deleteEmployee(id):
try:
connect = sqlite3.connect("views/database/storage.db")
cursor = connect.cursor()
cursor.execute("DELETE FROM tblemployee WHERE id =?", (id,))
connect.commit()
connect.close()
msg = "success"
return msg
except Exception as error:
print(error)
msg = "Error"
return msg
Make your Front-end HTML CSS and Javascript
crud\views\templates\index.html
//crud\views\templates\index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/eel.js"></script>
<link rel="stylesheet" href="../css/index.css">
<link rel="icon" href="../img/myglogo.png">
<title>Python Desktop App CRUD (Create Read Update and Delete ) sqlite3 using python eel</title>
</head>
<body>
<div class="container">
<p style="text-align:center;"><h2>Python Desktop App CRUD (Create Read Update and Delete ) sqlite3 using python eel</h2></p>
<p style="text-align:right;"><button type="button" class="btn" id="btn_addnew">Add New</button></p>
<table id="employeedatatable" class="styled-table">
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Action</th>
</tr>
</table>
<div class="modalContainer" id="Addnewmodal">
<div class="modal-content">
<span id="close" class="close">ร</span>
<p style="text-align:center;"><h2>Add New Employee</h2></p>
<form class="form-detail" action="#" method="post" id="myform">
<div class="form-row">
<label>Full Name:</label>
<input type="text" name="txtfullname" id="txtfullname" class="input-text" required placeholder="ex: Cairocoders Ednalan">
</div>
<div class="form-row">
<label>Position:</label>
<input type="text" name="txtposition" id="txtposition" class="input-text" required>
</div>
<div class="form-row">
<label>Office:</label>
<input type="text" name="txtoffice" id="txtoffice" class="input-text" required>
</div>
<div class="form-row-last">
<input type="submit" name="register" class="button" value="Add New Employee" onclick="save_register_js();">
</div>
<div class="box"><label class="label_input" id="return_register" style="width: 90%;color:green;font-weight:bold;"></label></div>
</form>
</div>
</div>
<div class="modalContainer" id="Edit_modal">
<div class="modal-content">
<span id="close" class="closeedit">ร</span>
<p style="text-align:center;"><h2>Edit Employee</h2></p>
<form class="form-detail" action="#" method="post" id="myformedit"><input type="hidden" name="id" id="id">
<div class="form-row">
<label>Full Name:</label>
<input type="text" name="edit_name" id="edit_name" class="input-text" required>
</div>
<div class="form-row">
<label>Position:</label>
<input type="text" name="edit_position" id="edit_position" class="input-text" required>
</div>
<div class="form-row">
<label>Office:</label>
<input type="text" name="edit_office" id="edit_office" class="input-text" required>
</div>
<div class="form-row-last">
<input type="submit" name="register" class="button" value="Update" onclick="save_edit();">
</div>
<div class="box"><label class="label_input" id="return_update" style="width: 90%;color:green;font-weight:bold;"></label></div>
</form>
</div>
</div>
<div class="modalContainer" id="Delete_modal">
<div class="modal-content">
<span id="close" class="closedelete">ร</span>
<p style="text-align:center;"><h2>Delete Employee</h2></p>
<p style="text-align:center;"><h3>Are you sure you want to delete this data?</h3></p>
<div class="form-detail">
<input type="hidden" name="idvalue" id="idvalue">
<input type="submit" name="btndelete" class="button" value="Delete" onclick="btn_submitdelete($('#idvalue').val());">
<div class="box"><label class="label_input" id="return_delete" style="width: 90%;color:green;font-weight:bold;"></label></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
</body>
</html>
crud\views\js\main.js
#crud\views\js\main.js
$(document).ready(function(){
eel.fetchalldata()
$("#btn_addnew").on("click", function() {
$("#Addnewmodal").show();
});
$(".close").on("click", function() {
$("#Addnewmodal").hide();
});
$(".closeedit").on("click", function() {
$("#Edit_modal").hide();
});
$(".closedelete").on("click", function() {
$("#Delete_modal").hide();
});
})
function link(target) {
window.location.href=target;
}
eel.expose(action_out)
function action_out(registers){
//alert("Show Table");
registers.forEach(showdata)
}
eel.expose(action_edit)
function action_edit(editemployees){
//alert(editemployees);
editemployees.forEach(get_array_values)
}
function get_array_values(item, index){
//alert(item);
//alert(index);
if (index == 0) {
document.getElementById("id").value = item;
} else if (index == 1) {
document.getElementById("edit_name").value = item;
} else if (index == 2) {
document.getElementById("edit_position").value = item;
} else if (index == 3) {
document.getElementById("edit_office").value = item;
}
else {}
}
// SAVE
async function save_edit(){
$( "#myformedit" ).validate({
messages: {
edit_name: {
required: "Please provide Name"
},
edit_position: {
required: "Please provide Position"
},
edit_office: {
required: "Please provide Office"
},
},
submitHandler: function(form) {
eel.btn_update($('#edit_name').val(),$('#edit_position').val(),$('#edit_office').val(),$('#id').val())
//alert("Success");
}
});
}
function showdata(item, index){
var get_table = document.getElementById("employeedatatable");
var tr = document.createElement("tr");
var td = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var td5 = document.createElement("td");
var id = item[0]
td.innerText = item[0]
td2.innerText = item[1]
td3.innerText = item[2]
td4.innerText = item[3]
td5.innerHTML = '<button type="button" class="btn" onclick="btn_edit('+ id +')">Edit</button> | <button type="button" class="btndelete" onclick="buttondelete(('+ id +'))">Delete</button>'
get_table.appendChild(tr)
tr.appendChild(td)
tr.appendChild(td2)
tr.appendChild(td3)
tr.appendChild(td4)
tr.appendChild(td5)
}
// NEW Employee
async function save_register_js(){
$( "#myform" ).validate({
messages: {
txtfullname: {
required: "Please provide Name"
},
txtposition: {
required: "Please provide Position"
},
txtoffice: {
required: "Please provide Office"
},
},
submitHandler: function(form) {
eel.btn_save($('#txtfullname').val(),$('#txtposition').val(),$('#txtoffice').val())
}
});
};
eel.expose(save_return);
function save_return(status){
if (status == "success"){
$('#return_register').text('New Employee completed successfully!');
$('#txtfullname').val('');
$('#txtposition').val('');
$('#txtoffice').val('');
}
if (status == "failure"){
$('#return_register').text('Error when registering, make sure you have no blank fields.');
}
};
eel.expose(edit_return);
function edit_return(status){
if (status == "success"){
$('#return_register').text('Employee Updated successfully!');
}
if (status == "failure"){
$('#return_register').text('Error when updating, make sure you have no blank fields.');
}
};
function buttondelete(id)
{
document.getElementById("idvalue").value = id;
$("#Delete_modal").show();
}
async function btn_edit(id){
eel.get_employee(id)
$("#Edit_modal").show();
}
async function btn_submitdelete(id){
//alert(id);
eel.get_delete_employee(id)
}
eel.expose(update_return);
function update_return(status){
if (status == "success"){
$('#return_update').text('Employee Updated successfully!');
$('#txtfullname').val('');
$('#txtposition').val('');
$('#txtoffice').val('');
}
if (status == "failure"){
$('#return_update').text('Error when updating record, make sure you have no blank fields.');
}
};
eel.expose(delete_return)
function delete_return(delemployees){
alert(delemployees);
if (status == "success"){
location.href = "index.html";
}
if (status == "failure"){
$('#return_delete').text('Error deleting record');
}
}
crud\views\css\index.css
//crud\views\css\index.css
body {
color: #162D5D;
font-family: 'Roboto', sans-serif;
}
.container {margin:30px;}
.styled-table {
border-collapse: collapse;width:100%;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.styled-table th,
.styled-table td {
padding: 12px 15px;
}
.styled-table tr {
border-bottom: 1px solid #dddddd;
}
.styled-table tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tr:last-of-type {
border-bottom: 2px solid #009879;
}
.btn {
background-color: #04AA6D!important;
border-radius: 5px;color:#ffffff;
font-size: 17px;
font-family: 'Source Sans Pro', sans-serif;
padding: 6px 18px;
}
.btndelete {
background-color: #cf2e2e!important;
border-radius: 5px;color:#ffffff;
font-size: 17px;
font-family: 'Source Sans Pro', sans-serif;
padding: 6px 18px;
}
.form-detail .form-row label.error {
color: red;
}
.form-detail .input-text {
margin-bottom: 27px;
}
.form-detail input {
width: 91%;
padding: 14.5px 15px;
border: 1px solid #e5e5e5;
border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
appearance: unset;
-moz-appearance: unset;
-webkit-appearance: unset;
-o-appearance: unset;
-ms-appearance: unset;
outline: none;
-moz-outline: none;
-webkit-outline: none;
-o-outline: none;
-ms-outline: none;
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #333;
}
.form-detail .form-row input:focus {
border: 1px solid #53c83c;
}
.form-detail .button {
background: #3b63ca;
border-radius: 6px;
-o-border-radius: 6px;
-ms-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
width: 160px;
border: none;
margin: 6px 0 50px 0px;
cursor: pointer;
font-family: 'Roboto', sans-serif;
color: #fff;
font-weight: 500;
font-size: 16px;
}
.form-detail .button:hover {
background: #3356b0;
}
.modalContainer {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
}
#close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js
jQuery Validation
http://jqueryvalidation.org/
Run : C:\python_dev\crud>python main.py
1664336035
Build your React-based CRUD applications, without constraints.
Open source, headless web application framework developed with flexibility in mind.
refine is a React-based framework for the rapid โจ development of web applications. It eliminates the repetitive tasks demanded by CRUD operations and provides industry standard solutions for critical parts like authentication, access control, routing, networking, state management, and i18n.
refine is headless by design offering unlimited styling and customization options.
Instead of being a limited set of pre-styled components, refine is a collection of helper hooks
, components
and providers
. They are all decoupled from your UI components and business logic, so they never keep you from customizing your UI or coding your own flow.
refine seamlessly works with any custom design or UI framework you favor. For convenience, it ships with ready-made integrations for Ant Design System and Material UI.
refine shines on data-intensive applications like admin panels, dashboards and internal tools. Thanks to built-in SSR support, refine can also power customer-facing applications like storefronts.
โ๏ธ Zero-config, one-minute setup with a single CLI command
๐ Connectors for 15+ backend services including REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi v4, Strapi GraphQL, Supabase, Hasura, Nhost, Appwrite, Firebase, Directus and Altogic
๐ SSR support with Next.js or Remix
โ Perfect state management & mutations with React Query
๐ Advanced routing with any router library of your choice
๐ Providers for seamless authentication and access control flows
โก Out-of-the-box support for live / real-time applications
๐ Easy audit logs & document versioning
๐ฌ Support for any i18n framework
๐ช Future-proof, robust architecture
โ Full test coverage
The fastest way to get started with refine is using the superplate project starter tool. Run the following command to create a new refine project configured with Ant Design System as the default UI framework:
npx superplate-cli --preset refine-antd my-project
Once the setup is complete, navigate to the project folder and start your project with:
npm run dev
Your refine application will be accessible at http://localhost:3000: Let's consume a public
fake REST API
and add two resources (posts, categories) to our project. Replace the contents of src/App.tsx
with the following code:
import { Refine, useMany } from "@pankod/refine-core";
import {
useTable,
List,
Table,
DateField,
Layout,
ReadyPage,
notificationProvider,
ErrorComponent,
} from "@pankod/refine-antd";
import routerProvider from "@pankod/refine-react-router-v6";
import dataProvider from "@pankod/refine-simple-rest";
import "@pankod/refine-antd/dist/styles.min.css";
const App: React.FC = () => {
return (
<Refine
routerProvider={routerProvider}
dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
resources={[{ name: "posts", list: PostList }]}
Layout={Layout}
ReadyPage={ReadyPage}
notificationProvider={notificationProvider}
catchAll={<ErrorComponent />}
/>
);
};
export const PostList: React.FC = () => {
const { tableProps } = useTable<IPost>();
const categoryIds =
tableProps?.dataSource?.map((item) => item.category.id) ?? [];
const { data, isLoading } = useMany<ICategory>({
resource: "categories",
ids: categoryIds,
queryOptions: {
enabled: categoryIds.length > 0,
},
});
return (
<List>
<Table<IPost> {...tableProps} rowKey="id">
<Table.Column dataIndex="title" title="title" />
<Table.Column
dataIndex={["category", "id"]}
title="category"
render={(value: number) => {
if (isLoading) {
return "loading...";
}
return data?.data.find(
(item: ICategory) => item.id === value,
)?.title;
}}
/>
<Table.Column
dataIndex="createdAt"
title="createdAt"
render={(value) => <DateField format="LLL" value={value} />}
/>
</Table>
</List>
);
};
export default App;
interface IPost {
title: string;
createdAt: string;
category: { id: number };
}
interface ICategory {
id: number;
title: string;
}
Now, you should see the output as a table populated with post
& category
data:
Download Details:
Author: pankod
Source Code: https://github.com/pankod/refine
License: MIT
#react #crud #nextjs #webdev
1663558015
Learn how to build CRUD App using Node.js, MySQL and React.js. MySQL CRUD Operations using Node.js and React. CRUD Real-world Project from scratch. Create, Read, Update and Delete data using a MySQL database.
00:00 Introduction
00:46 MySql Installation
02:20 MySql Basics
06:13 Node.js MySql Installation
11:04 Node.js MySql Fetch Data (Read)
13:07 Node.js MySql Create a New Data
18:34 Creating a React App
21:29 React How to Fetch Data From MySql
27:31 React Add New Data to MySql Database
32:21 React App Design
36:04 Node.js MySql Delete Operation
37:38 React MySql Delete Item From Database
39:10 React Node.js MySql How to Update Data
46:07 Outro
Source Code: https://github.com/safak/youtube2022/tree/react-mysql
#mongodb #node #react #crud