HTTP

Anything starting with http gets you banned -- Scott Hanselman tweet

HTTP is arguably the most important application level network protocol for what we consider to be the internet. It is the protocol that allows web browsers and web servers to communicate. It is also becoming the most popular protocol for implementing web services. github

Elm provides a mechanism to send HTTP requests to a server and handle the responses. Here's an example of how you can send a POST request with the login form data and check for a 200 response:

import Html exposing (form, input, button, text) import Html.Attributes exposing (placeholder, type_) import Html.Events exposing (onClick) import Http import Json.Decode as Json -- Define the model type alias Model = { username : String , password : String , response : String } initialModel : Model initialModel = { username = "" , password = "" , response = "" } -- Define the Msg type type Msg = UsernameChanged String | PasswordChanged String | SubmitClicked -- Define the update function update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of UsernameChanged newUsername -> ( { model | username = newUsername }, Cmd.none ) PasswordChanged newPassword -> ( { model | password = newPassword }, Cmd.none ) SubmitClicked -> let request = { method = "POST" , headers = [] , url = "https://your-server.com/login" -- Replace with your server URL , body = Http.jsonBody <| Json.object [ ( "username", Json.string model.username ) , ( "password", Json.string model.password ) ] , expect = Http.expectString handleResponse } in ( { model | response = "Sending request..." }, Http.send handleHttpError request ) handleResponse : Result Http.Error String -> Msg handleResponse result = case result of Ok response -> if response == "200" then ShowSuccess else ShowError response Err error -> ShowError (Http.errorToString error) handleHttpError : Http.Error -> Msg handleHttpError error = ShowError (Http.errorToString error) -- Define the view function view : Model -> Html Msg view model = form [] [ input [ placeholder "Username", type_ "text", onInput UsernameChanged ] [] , input [ placeholder "Password", type_ "password", onInput PasswordChanged ] [] , button [ onClick SubmitClicked ] [ text "Submit" ] , text model.response ] -- Start the Elm application main : Program () Model Msg main = Html.program { init = ( initialModel, Cmd.none ) , view = view , update = update , subscriptions = \_ -> Sub.none }

Unused pattern variable request commit

~

HTTP: Make HTTP requests in Elm. Talk to servers. elm-lang , page

John F. Miller: MILLER, John F., 2017. Using Elm to Submit a form without tracking the field values. Stack Overflow. Online. 5 October 2017. [Accessed 23 May 2023]. Available from: stackoverflow