Often we cannot rely on formatted and written tutorial to do our project. We have to learn to research, explore and read documentation by yourself.
We will be following the documentation starting at https://adonisjs.com/docs/4.1/installation to learn how to use Adonis.
- Read https://adonisjs.com/docs/4.1/installation
- Follow the steps (you may ignore the
PATH
part because most of the time it has been done) - Create a new adonis project named
meteors
- Start the
meteors
application - Open the browser at the URL, you should see Adonis logo and the text that says "It works!"
Those two you can do at your own leisure, but should be done before you do your large project
- Read https://adonisjs.com/docs/4.1/routing
- Answer this question: which file will we find the routes?
- Create a new route for the url
about-us
that will just return the text "About Us" - Create a new route for the url
view-record
which has one required parameterrecord-id
. Return the value of the required parameter - Created a named route by the name of
special
.
Controllers are classes that orangised related routes together.
- Read: https://adonisjs.com/docs/4.1/controllers
- Create a new
http
controller namedSightingController
-- you will need to use the command line interface. - You can find the new controller in the
app/Controllers
folder. - Create a function named
index
inside theSightingController
. There's a demonstration in the linked document above - Read: https://adonisjs.com/docs/4.1/response and use what you read there to send back a json object, like below:
{ "sightings":[ { "date": "22/01/2020", "coordinate":[ "lat":1.07{ "lng":2.02 } } ] }
- Read the first link again, on the section of Using Controllers. Create new route at the url
\sightings\
and it should activate theindex
function at theSightingController
. (Note this is also abbreviated asSightingController.index
)
- Read https://adonisjs.com/docs/4.1/views and refer to this link constantly
- Create a new view named
sighting-index
, following the link above - Where can we find the newly created view? (Hint: you can right click on the
meteors
folder and use theFind in Folder
feature.) - Take a look at
welcome.edge
and study it. - In
sighting-index.edge
, add in the template code fromBootstrap Getting Started
and have it to say<h1>Hello World</h1>
- Create a new route for the url
sightings/about
and it should render thesighting-index.edge
view file. (remember to add toroute.js
as well)
Refer to the following links for assistance:
- https://adonisjs.com/docs/4.1/routing
- https://adonisjs.com/docs/4.1/controllers
- https://adonisjs.com/docs/4.1/views
- Create a route at the url
sightings/details/:detail_id/view
- Create a new function in
SightingController
nameddetails
- Map the route in 6.1 to the
details
function inSightingController
- The function
details
should render an edge file namedsightings-details
- Extract out the route parameter
detail_id
and send it to the edge file. (Hint: the syntax is the same as express and hbs)
Refer to:
- Create a
GET
route for the urlsightings/details/:detail_id/create
- Create a function named
create
inSightingController
- Associate the route created in 7.1 to the function created in 7.2
- Create a view with the name
sightings-create
- In the view, display a form that asks the user for date, latitude and longtitude.
- Make sure you include the proper security measures (see CSRF at: https://adonisjs.com/docs/4.1/views)
- Create a
POST
route for the urlsightings/details/:detail_id/create
- Add a function name
processCreate
- Send back the details entered in the form back as JSON.
- Log into
mysql
and create a new database namedmeteors
mysql -u root
create database meteors; CREATE USER 'user'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'; GRANT ALL PRIVILEGES ON *.* TO 'user'@'localhost'; FLUSH PRIVILEGES;
- Open up the .env file
- Change the
DB_CONNECTION
in the .env file tomysql
- Type in the terminal:
yarn add mysql
- Restart the server app and ensure that there is no error
- At another terminal, type in:
adonis migration:run
- Read: https://adonisjs.com/docs/4.1/lucid
- Read: https://adonisjs.com/docs/4.1/migrations
- Read: https://adonisjs.com/docs/4.1/lucid#_inserts_updates
Make sure to read the whole documentation linked before starting
- Create a model named
Sighting
with a migration file - Give it a string field for
lat
, string field forlng
and a date field fordate
- Make a new migration:
adonis make:migration alter_sightings --action select sightings
- Add the following to
up
up () {
this.table('sightings', (table) => {
table.datetime('datetime');
table.dropColumn('date');
})
}
- Do a
adonis migration run
- Add the code to
SightingController.processCreate
such that it will save the new sighting information to the database
- Make sure to read this first: https://adonisjs.com/docs/4.1/lucid#_static_methods
- Make sure to read this first: https://edge.adonisjs.com/docs/iteration
- Make sure to read this first: https://forum.adonisjs.com/t/correctly-passing-collection-of-models-to-edge/131
- Change
SightingController.index
to fetch all the sighting records - Pass all the recording sightings to the view
sightings-index
- Use iteration to display all the records in a table form
- Make sure to read: https://adonisjs.com/docs/4.1/lucid#_static_methods
- Add
SightingController.update
to the SightingController, and also a route associated with it. The url should be/sightings/:sighting_id/update
, where the parametersighting_id
refers to the id of the sightings that we want to edit - Display the form with the current details of the sighting. Make sure to detail_id with the CSRF
- Make it such that when the user submit the form, the sighting will be updated. Follow
the steps below:
- Create a new function in the
SightingController
namedprocessUpdate
- Create a route to to the new function. Make sure to include the
sighting_id
- Update the sighting with the new information (https://adonisjs.com/docs/4.1/lucid#_inserts_updates)
- Redirect the user back to the
/sightings/
url (see: https://adonisjs.com/docs/4.1/response#_redirects)
- Create a new function in the