Skip to main content

Simple CRUD with CodeIgniter and Vue.JS with Source Code

Language

Developing a web application is not as easy as you think to reach the client/user expectations. By using some libraries and frameworks, will help developers a lot to ease their work on developing a project. And by that, I have created a simple web application in PHP with JavaScript with the use of CodeIgniter Framework and Vue.js. CodeIgniter is a PHP framework that is built for developers to ease their work when developing a web application. Vue.js is a progressive JavaScript framework that is built to make

About

This is a simple CRUD web application that is developed Codeigniter with a combination of Vue.js to help beginner programmers and also those programmers who are planning to develop a project using these frameworks. The project is simple user information which the user can Create New, Edit existing, View Information, and Delete Data. For the view, the users' list along with their information is shown in a table and modal form for the registration and update user.

Features/Functionalities:

  • Create
  • Read
  • Edit
  • Delete
  • Search
  • Validation
  • Pagination

Frameworks/Libraries used in this project

  • Bootstrap 4 - for design
  • Bulma - for design and modal
  • Font awesome - for cool icons
  • Codeigniter - PHP framework
  • Vue js -JavaScript Library/framework
  • Axios - Ajax Library

How to Run (using XAMPP)

  1. Download and Install the latest XAMPP version.
  2. Run the XAMPP Control Panel and start the Apache and MySQL.
  3. Download and Extract the source code "zip" file. (download button is located below)
  4. Copy and Paste the Extracted folder into XAMPP's "htdocs" folder. [C:\xampp\htdocs\] (Please make sure the root folder of the source code named as "civuejs", otherwise you have to configure the Codeigniter base_url)
  5. Open a browser and browse XAMPP's PHPMyAdmin. [http://localhost/phpmyadmin]
  6. Create a new database naming "civue".
  7. Import the "db_civue.sql" file located in the root folder of the source code.
  8. Now, browse the project in your browser or click "http://localhost/civuejs" to open the web application in your current browser's new window.

There it is, you can now explore the functionalities of the Simple CRUD web application and learn how it works. You can also use other web servers as long it can run PHP script.

I hope this simple project will help you to understand and expand your knowledge in developing PHP web applications using some frameworks and libraries that are included in this simple project.

Enjoy!

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Comments

Submitted byDonald E Brady (not verified)on Thu, 08/23/2018 - 08:20

Well I got the database and tables working, but I dont know how to get the program to run. I jusat tried localhost/civuejs . but only the standard code igniter welcome message comes up. What to do?
Submitted byAnonymous (not verified)on Thu, 04/23/2020 - 09:15

to do bien grasias a dios

Add new comment