Tutorial on creating a CRUD (Create, Read, Update, Delete) application using ELM programming language. ELM is a functional programming language for creating web applications, known for its strong emphasis on correctness and reliability. In this tutorial, we’ll create a simple TODO list application.
Before we start, make sure you have ELM installed on your machine. If you don’t have it, you can download and install it from the official ELM website: https://elm-lang.org/
Let’s get started:
Step 1: Set up the project
Create a new directory for your project and navigate to it using the terminal:
mkdir elm-crud-tutorial
cd elm-crud-tutorial
Next, create a new file named Main.elm inside the project directory. This will be the entry point of our application.
Step 2: Define the model
In ELM, you manage the application’s state through a model. Let’s define our model for the TODO list application:
module Main exposing (..)
type alias Task =
{ id : Int
, title : String
, completed : Bool
}
type alias Model =
{ tasks : List Task
, nextId : Int
}
init : Model
init =
{ tasks = []
, nextId = 1
}
In the above code, we define two record types: Task and Model. The Task type represents an individual task with an id, title, and completion status. The Model type represents the overall state of our application, containing a list of tasks and the next available task id.
Step 3: Define update functions
In ELM, you update the model by sending messages to the update function. Let’s define some messages and the update function to handle them:
type Msg
= AddTask String
| UpdateTask Int Bool
| DeleteTask Int
update : Msg -> Model -> Model
update msg model =
case msg of
AddTask title ->
{ model | tasks = model.tasks ++ [ { id = model.nextId, title = title, completed = False } ], nextId = model.nextId + 1 }
UpdateTask taskId completed ->
{ model | tasks = List.map (\task -> if task.id == taskId then { task | completed = completed } else task) model.tasks }
DeleteTask taskId ->
{ model | tasks = List.filter (\task -> task.id /= taskId) model.tasks }
In the code above, we define the Msg type to represent the different actions that can occur in our application (AddTask, UpdateTask, and DeleteTask). The update function takes a message and the current model as arguments and updates the model accordingly based on the message.
Step 4: Define the view function
Next, we need to define the view function, which describes how the UI should be displayed based on the current model:
import Browser
import Html exposing (Html, div, ul, li, input, button, text)
view : Model -> Html Msg
view model =
div []
[ input [ placeholder "Task title", onInput AddTask ] []
, button [ onClick (AddTask model.nextId) ] [ text "Add Task" ]
, ul [] (List.map viewTask model.tasks)
]
viewTask : Task -> Html Msg
viewTask task =
li []
[ input [ type_ "checkbox", checked task.completed, onClick (UpdateTask task.id (not task.completed)) ] []
, text task.title
, button [ onClick (DeleteTask task.id) ] [ text "Delete" ]
]
In the code above, we use the Html module to define our view. The view function takes the model as an argument and renders the input field, “Add Task” button, and a list of tasks.
Step 5: Wire everything together
Now that we have our model, update, and view functions ready, let’s wire them together to create the full application:
import Browser
import Html exposing (Html, div, ul, li, input, button, text)
import Html.Events exposing (onClick, onInput)
-- Model and update functions (same as Step 2 and Step 3)
-- View function (same as Step 4)
main =
Browser.sandbox { init = init, update = update, view = view }
Step 6: Compile and run the application
To run the application, use the ELM compiler to compile the Main.elm file:
elm make Main.elm
This will generate an index.html file and a main.js file. Now, open index.html in your web browser, and you should see your TODO list application.
Congratulations! You’ve successfully created a simple TODO list application using ELM with CRUD operations. ELM’s model-update-view architecture makes it easy to manage the application’s state and render the UI based on the model’s data.
Feel free to enhance this application further by adding more features like editing tasks, persisting data, or improving the UI. Happy coding!
Related Articles
