This website is for the whole members and visitors to this congregation who can interact with any activity (prayer, prayer meeting, conferences, events) by getting whole the material and presentation of static data. The priest and the servants of God shall have an administrative role by inputting all material that is relating to all the work to be presented to them and members of the congregation. All information related to all activities to be presented to visitors and them of the congregation. For further development in the near future, all associates should be able to register and log in so that they can also enter information and participate in the digital activity and post news, pictures, video and live streaming for(prayer,prayer meetings, conferences, events) relating to this gathering.
In general, this website presents information about the activity(prayer, prayer meetings, conferences, events) related to the church congregation and its members and visitors. This website is for the whole members and visitors to this congregation who want to interact with any activity and with each other. And to help them to get all information about the church congregation activities and to support other people to search for God. Information that is available on this website is about the church congregation, pastor, news, upcoming activities, members, and servants of God. Check out the Mockup that I have created as part of the design process Mockup of the Church congregation.
There are six general pages (Home, events, location, pastor Contact us, About us, and the giving). In the pages (Home, events, location, pastor, about us) that present all information like(news, events, locations) about church congregation and their(priest and the servants) staff and goals. On the page(contact us) to contact them and the page(giving) its to donation to the church.
- Admin Dashboard: to be able to administrative website content by adding news, activity video images, etc.
- Signin/Signup: to give all members the opportunity to post articles, pictures, or videos related to church activity
- profile page: To display all information about all members should have a him/her.
- Codeinstitute: materials and homework and projector during the lesson.
- HTML: by using HTML language to markup web pages in this project.
- CSS: to perform style for the WepApp.
- FontAwesome: to perform font and icon.
- bootstrap 4: to perform responsive for the WepApp.
- JavaScript and jQuery to perform:
- The active class for the navbar links.
- Data-Countdown for events.
- Sticky-Header.
- Mobile Navigation(navbar responsive for the mobile).
- Back to top: When you are at the bottom of a page, there is a button that will take you to the top of the page.
- Send Email.
- Google map.
- Websites like: (Stackoverflow, css-tricks, w3schools, betalamedswish, github, youtube).
- API:
- EmailJS: to send email.
- Google: to get the address location on the map.
- Twitter: to get lasts twitter.
- Swish: payment method only works in Sweden.
I have tested the web page with my mentor. Initially, I got some feedback and I made a little changes
- Make code more formatted.
- Reduce the comments.
I have tested the web page on different browsers and screen sizes and its works. My Contact form did not work really well at first, so when submitting a form page could not refresh, but then after many search I found solution. It works and refresh well and shows feedback message to users. Have tested payment system it works well and you can donate, which I have mentioned only in Sweden works. Google map API It was a challenge to make two maps, two different addresses in the same page but thanks to and Google I fixed it.
I have chosen to deployed my project in github pages. Why GitHub Pages? GitHub Pages offers a lot of features and flexibility, all for free. Some of the benefits include:
- Easy setup.
- Good cooperation and communication using Git and GitHub.
- Free hosting with >95% uptime.
- Live updating with normal GitHub workflow.
In GitHub, navigate to my username.github.io repository and click Settings. Within Settings, navigate to the Source section within the Github Pages section. From the dropdown menu, select master branch. Now, all of may repositories can be found at http://username.github.io/repository-name.