Better form for htmlInput and exploring POST messages.
This commit is contained in:
Offray Luna
parent
3b5c671a08
commit
89591a7c7f
@ -153,6 +153,115 @@ BreaMember >> html [
|
|||||||
^ self head, self htmlOutput
|
^ self head, self htmlOutput
|
||||||
]
|
]
|
||||||
|
|
||||||
|
{ #category : #public }
|
||||||
|
BreaMember >> htmlInput [
|
||||||
|
"I capture data in a HTML Form and use it to create a new BreaMember"
|
||||||
|
^ '
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="description" content="A portfolio template that uses Material Design Lite.">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
||||||
|
<title>Add Member | GIG Network</title>
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
|
||||||
|
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-pink.min.css" />
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
|
||||||
|
<div class="mdl-layout__drawer mdl-layout--small-screen-only">
|
||||||
|
<nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
|
||||||
|
<a class="mdl-navigation__link is-active" href="index.html">Portfolio</a>
|
||||||
|
<a class="mdl-navigation__link" href="blog.html">Blog</a>
|
||||||
|
<a class="mdl-navigation__link" href="about.html">About</a>
|
||||||
|
<a class="mdl-navigation__link" href="contact.html">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<main class="mdl-layout__content">
|
||||||
|
<div class="mdl-grid portfolio-max-width portfolio-contact">
|
||||||
|
<div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--4dp">
|
||||||
|
<div class="mdl-card__title">
|
||||||
|
<h2 class="mdl-card__title-text">Add new member</h2>
|
||||||
|
</div>
|
||||||
|
<div class="mdl-card__supporting-text">
|
||||||
|
<p>
|
||||||
|
Fill out the form.
|
||||||
|
The fields preceded by [*] are obligatory.
|
||||||
|
</p>
|
||||||
|
<form action="#summit" method="POST" class="">
|
||||||
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||||
|
<input class="mdl-textfield__input" pattern="[A-Z,a-z, ]*" type="text" id="givenName">
|
||||||
|
<label class="mdl-textfield__label" for="givenName">[*]Given Name...</label>
|
||||||
|
<span class="mdl-textfield__error">Letters and spaces only</span>
|
||||||
|
</div>
|
||||||
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||||
|
<input class="mdl-textfield__input" pattern="[A-Z,a-z, ]*" type="text" id="familyName">
|
||||||
|
<label class="mdl-textfield__label" for="familyName">[*]Family Name...</label>
|
||||||
|
<span class="mdl-textfield__error">Letters and spaces only</span>
|
||||||
|
</div><br>
|
||||||
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||||
|
<input class="mdl-textfield__input" type="text" id="email">
|
||||||
|
<label class="mdl-textfield__label" for="email">[*]Email...</label>
|
||||||
|
</div>
|
||||||
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||||
|
<input class="mdl-textfield__input" pattern="[A-Z,a-z, ]*" type="text" id="country">
|
||||||
|
<label class="mdl-textfield__label" for="country">[*]Country...</label>
|
||||||
|
<span class="mdl-textfield__error">Letters and spaces only</span>
|
||||||
|
</div><br>
|
||||||
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||||
|
<input class="mdl-textfield__input" pattern="[A-Z,a-z, ]*" type="text" id="organizations">
|
||||||
|
<label class="mdl-textfield__label" for="organizations">
|
||||||
|
[*]Organization(s)</label>
|
||||||
|
<span class="mdl-textfield__error">Letters and spaces only</span>
|
||||||
|
</div><br>
|
||||||
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||||
|
<input class="mdl-textfield__input" type="text" id="website">
|
||||||
|
<label class="mdl-textfield__label" for="website">Personal website...</label>
|
||||||
|
</div><br>
|
||||||
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||||
|
<input class="mdl-textfield__input" type="text" id="twitter">
|
||||||
|
<label class="mdl-textfield__label" for="twitter">Twitter...</label>
|
||||||
|
</div>
|
||||||
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||||
|
<input class="mdl-textfield__input" type="text" id="facebook">
|
||||||
|
<label class="mdl-textfield__label" for="facebook">Facebook...</label>
|
||||||
|
</div><br>
|
||||||
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
|
||||||
|
<textarea class="mdl-textfield__input" type="text" rows="5" id="tags"></textarea>
|
||||||
|
<label class="mdl-textfield__label" for="tags">Tags (separated with commas)...</label>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect
|
||||||
|
mdl-button--accent" type="submit">
|
||||||
|
Submit
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="mdl-mini-footer">
|
||||||
|
<div class="mdl-mini-footer__left-section">
|
||||||
|
<div class="mdl-logo">Simple portfolio website</div>
|
||||||
|
</div>
|
||||||
|
<div class="mdl-mini-footer__right-section">
|
||||||
|
<ul class="mdl-mini-footer__link-list">
|
||||||
|
<li><a href="#">Help</a></li>
|
||||||
|
<li><a href="#">Privacy & Terms</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
'
|
||||||
|
]
|
||||||
|
|
||||||
{ #category : #public }
|
{ #category : #public }
|
||||||
BreaMember >> htmlOutput [
|
BreaMember >> htmlOutput [
|
||||||
|
|
||||||
|
|||||||
@ -6,7 +6,8 @@ Class {
|
|||||||
#name : #BreaWebsite,
|
#name : #BreaWebsite,
|
||||||
#superclass : #Object,
|
#superclass : #Object,
|
||||||
#instVars : [
|
#instVars : [
|
||||||
'fossilRepo'
|
'fossilRepo',
|
||||||
|
'server'
|
||||||
],
|
],
|
||||||
#category : #Brea
|
#category : #Brea
|
||||||
}
|
}
|
||||||
@ -20,3 +21,35 @@ BreaWebsite >> fossilRepo [
|
|||||||
BreaWebsite >> fossilRepo: anObject [
|
BreaWebsite >> fossilRepo: anObject [
|
||||||
fossilRepo := anObject
|
fossilRepo := anObject
|
||||||
]
|
]
|
||||||
|
|
||||||
|
{ #category : #'server handling' }
|
||||||
|
BreaWebsite >> routes [
|
||||||
|
"Maybe the first part should be in a separate method."
|
||||||
|
self server
|
||||||
|
serveStatic: '/gig/demo' from: '/opt/gig/';
|
||||||
|
GET: '/gig/members/test' -> [ :req | BreaMember new renderTestUserAsHtml ];
|
||||||
|
GET: '/gig/members/add' -> [ :req | BreaMember new htmlInput ]
|
||||||
|
]
|
||||||
|
|
||||||
|
{ #category : #accessing }
|
||||||
|
BreaWebsite >> server [
|
||||||
|
^ server ifNil: [ server := Teapot configure: { #port ->8080 } ]
|
||||||
|
]
|
||||||
|
|
||||||
|
{ #category : #accessing }
|
||||||
|
BreaWebsite >> server: anObject [
|
||||||
|
server := anObject
|
||||||
|
]
|
||||||
|
|
||||||
|
{ #category : #'server handling' }
|
||||||
|
BreaWebsite >> start [
|
||||||
|
"I define the routes and start the server"
|
||||||
|
self routes.
|
||||||
|
self server start
|
||||||
|
]
|
||||||
|
|
||||||
|
{ #category : #'server handling' }
|
||||||
|
BreaWebsite >> stop [
|
||||||
|
"I define the routes and start the server"
|
||||||
|
self server class stopAll
|
||||||
|
]
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user